github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-02-21 19:46:56 +01:00
parent aa6bd2a884
commit 2a07e968a3
No known key found for this signature in database
GPG key ID: 42498463316F048B
52 changed files with 1145 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/cypress/e2e/helpDialog.spec.ts
View file

@ -1,16 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
describe('Help Dialog', () => {
beforeEach(() => {
cy.visitTestNote()
})
it('ToDo-List', () => {
cy.getByCypressId('editor-help-button').click()
cy.get('input[type="checkbox"]').should('exist').should('not.be.checked')
})
})

257
frontend/locales/en.json
View file

@ -267,13 +267,6 @@
"features": "Features",
"yamlMetadata": "YAML Metadata",
"slideExample": "Slide Example"
},
"cheatsheet": {
"title": "Cheatsheet",
"example": "Example",
"syntax": "Syntax",
"exampleAlert": "This is an alert area.",
"highlightedText": "Highlight"
}
},
"onlineStatus": {
@ -630,5 +623,255 @@
"help": "The primary user interface language"
}
}
},
"cheatsheet": {
"button": "Open Cheatsheet",
"modal":{
"title": "Cheatsheet",
"headlines": {
"description": "Description",
"exampleInput": "Example Input",
"exampleOutput": "Example Output",
"selectTopic": "Select Topic",
"readMoreLink": "Read More"
}
},
"categories": {
"basic": "Basics",
"other": "Other",
"embedding": "Embedding",
"charts": "Charts & Diagrams"
},
"basics": {
"formatting": {
"title": "Formatting",
"basic": {
"title": "Basic",
"description": "These are the basic markdown formatting rules.",
"example": "**Bold**\n__Bold__\n\n*Italic*\n_Italic_\n\n++Underline++\n~~Strikethrough~~\n\nSub~script~~\n\nSuper^script^\n\n==Marked=="
},
"abbreviation": {
"title": "Abbreviation",
"description":"",
"example": "*[HTML]: Hyper Text Markup Language\n*[W3C]: World Wide Web Consortium\nThe HTML specification\nis maintained by the W3C."
},
"footnote": {
"title": "Footnotes",
"description": "",
"example": "Here is a footnote reference,[^1] and another.[^longnote]\n\n[^1]: Here is the footnote.\n\n[^longnote]: Here's one with multiple blocks.\n\n Subsequent paragraphs are indented to show that they\nbelong to the previous footnote."
}
},
"headlines": {
"title": "Headlines",
"hashtag": {
"title": "Hashtag",
"description": "",
"example": "# Headline 1\n\n## Headline 2\n\n### Headline 3\n\n#### Headline 4\n\n##### Headline 5\n\n###### Headline 6"
},
"equal": {
"title": "Equal",
"description": "An alternative form to define the first headline is to append a line of only equal-signs.",
"example": "Headline 1\n=========="
}
},
"code": {
"title": "Code",
"inline": {
"title": "Inline",
"description": "You can define an inline code block by wrapping it in backticks.",
"example": "This is `code`."
},
"block": {
"title": "Block",
"description": "You can define a code block by putting a line of three backticks before and after the code part.",
"example": "```\nthis is a code block\n```"
}
},
"lists": {
"title": "Lists",
"unordered": {
"title": "Unordered",
"description": "",
"example": "- A\n- B\n- C\n\n* A\n* B\n* C"
},
"ordered": {
"title": "Ordered",
"description": "",
"example": "1. A\n2. B\n3. C\n\n100. A\n101. B\n102. C"
}
},
"images": {
"title": "Images",
"basic": {
"title": "Basic",
"description": "",
"example": "![Image](/icons/apple-touch-icon.png)"
},
"size": {
"title": "Size",
"description": "",
"example": "![Image](/icons/apple-touch-icon.png =100x50)\n\n![Image](/icons/apple-touch-icon.png =60x)\n\n![Image](/icons/apple-touch-icon.png =x50)"
}
},
"links": {
"title": "Links",
"description": "",
"example": "[Example link!](https://example.org)\n\nhttps://example.org"
}
},
"abcjs": {
"title": "abcjs",
"description": "You can render music sheets with abcjs by using music standard notation in a codeblock with `abc` as language.",
"example": "```abc\nX:1\nT:Speed the Plough\nM:4/4\nC:Trad.\nK:G\n|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|\nGABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|\n|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|\ng2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|\n```"
},
"alert": {
"title": "Alert boxes",
"description": "Use alert boxes to bring extra attention to parts of your document.",
"example": ":::success\nThis is a success\n:::\n\n:::danger\nThis is a danger\n:::\n\n:::warning\nThis is a warning\n:::\n\n:::info\nThis is a info\n:::"
},
"blockquoteTags": {
"name": {
"title": "Name",
"description": "Use name tags to indicate who wrote a specific quote e.g. if you're commenting on the text.",
"example": "> Imagination is more important than knowledge.\n> [name=Albert Einstein]"
},
"color": {
"title": "Color",
"description": "Use color tags to tint the border of the quote.",
"example": "> This is the default color\n\n> This is red! [color=red]\n\n> This is blue! [color=#0000ff]"
},
"time": {
"title": "Time",
"description": "Use time tags to specify when a time stamp",
"example": "The password is: changeme\n\n> Please change it ASAP [time=2020-03-05]"
},
"title": "Blockquote Tags",
"description": "Use name, time or color tags to specify your blockquotes. Color tags modify the border color.",
"example": "> [name=Max] Named quote\n\n> [time=today] Time quote\n\n> [color=red] quote\n\n> [name=Max] [color=green] [time=today] Combined quote"
},
"bootstrapIcon": {
"title": "Bootstrap Icons",
"description": "You can use bootstrap icons in your document by putting the name of an icon between colons but prefixed with `bi-`. A listing of all bootstrap icons can be found on their website.",
"example": ":bi-music-note-beamed::bi-music-note-beamed::bi-music-note-beamed:\nAround the :bi-globe-americas:\nAround the :bi-globe-asia-australia:\nAround the :bi-globe-central-south-asia:\nAround the :bi-globe-europe-africa:"
},
"emoji": {
"title": "Emojis",
"description": "You can add colored emojis by either placing the unicode character or by using a shortcode. HedgeDoc supports every emoji that Twemoji supports. You can also use the emoji picker in the editor toolbar.",
"example": "I :heart: :hedgehog:"
},
"csv": {
"title" : "CSV",
"table" : {
"title": "Table",
"description" : "You can render a CSV text as table by using a code block with `csv` as language. You must specify the delimiter.",
"example" : "```csv delimiter=;\nUsername; Identifier;First name;Last name\n\"booker12; rbooker\";9012;Rachel;Booker\ngrey07;2070;Laura;Grey\njohnson81;4081;Craig;Johnson\njenkins46;9346;Mary;Jenkins\nsmith79;5079;Jamie;Smith\n```"
},
"header": {
"title": "Header",
"description": "By adding the header keyword you can define that the first line is used as table header",
"example": "```csv delimiter=; header\nUsername; Identifier;First name;Last name\n\"booker12; rbooker\";9012;Rachel;Booker\ngrey07;2070;Laura;Grey\njohnson81;4081;Craig;Johnson\njenkins46;9346;Mary;Jenkins\nsmith79;5079;Jamie;Smith\n```"
}
},
"flowchart": {
"title": "flowchart.js",
"description": "Render flowcharts diagrams using flowchart.js by using a code block with `flow` as language.",
"example": "```flow\nst=>start: Start\ne=>end: End\nop=>operation: My Operation\nop2=>operation: lalala\ncond=>condition: Yes or No?\n\nst->op->op2->cond\ncond(yes)->e\ncond(no)->op2\n```"
},
"gist": {
"title": "GitHub Gist",
"description": "Embed GitHub Gists by placing a gist URL on a single line.",
"example": "# This is my gist\nhttps://gist.github.com/schacon/1\nThis is just the link to a gist: https://gist.github.com/schacon/1\n[Using the link tag will also not trigger the embedding](https://gist.github.com/schacon/1)"
},
"graphviz": {
"title": "GraphViz",
"description": "Render GraphViz diagrams by using the DOT language in a code block with `graphviz` as language.",
"example": "```graphviz\ngraph {\n a -- b\n a -- b\n b -- a [color=blue]\n}\n```"
},
"katex": {
"title": "KaTeX",
"description": "You can render LaTeX mathematical expressions using KaTeX by encapsulating them in dollar signs.",
"example": "The *Gamma function* satisfying $\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N$ is via the Euler integral\n\n$$\nx = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\n$$\n\n$$\n\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.\n$$"
},
"asciinema": {
"title": "Asciinema",
"description": "Embed an Asciinema video by placing the URL in a single line.",
"example": "https://asciinema.org/a/117928\n"
},
"mermaid": {
"title": "Mermaid",
"description": "Render diagrams and charts using mermaid.js by adding a code block with the language `mermaid`",
"example": "```mermaid\ngantt\n title A Gantt Diagram\n\n section Section\n A task: a1, 2014-01-01, 30d\n Another task: after a1, 20d\n\n section Another\n Task in sec: 2014-01-12, 12d\n Another task: 24d\n```"
},
"imagePlaceholder": {
"title": "Image Placeholder",
"description": "You can use image placeholders to indicate spots where images should be placed. To do this use an image link with `https://` as URL. You can upload the actual image directly from the renderer. Placeholders also support size definition, alt text and title.",
"example": "![This is a placeholder image](https://)"
},
"iframeCapsule": {
"title": "Iframe capsule",
"description": "To protect viewers every iframe has to be activated explicitly. Before this, no information is fetched. Adding additional privileges using the sandbox attribute is not allowed.",
"example": "<iframe src=\"https://example.org/\"></iframe>"
},
"plantuml": {
"title": "PlantUML",
"description": "Render diagrams and charts using PlantUML by adding a code block with the language `plantuml`. PlantUML diagrams are not rendered in your browser like the other charts, but by an external server.",
"example": "```plantuml\n@startuml\nparticipant Alice\nparticipant \"The **Famous** Bob\" as Bob\n\nAlice -> Bob : hello --there--\n... Some ~~long delay~~ ...\nBob -> Alice : ok\nnote left\n This is **bold**\n This is //italics//\n This is \"\"monospaced\"\"\n This is --stroked--\n This is __underlined__\n This is ~~waved~~\nend note\n\nAlice -> Bob : A //well formatted// message\nnote right of Alice\n This is <back:cadetblue><size:18>displayed</size></back>\n __left of__ Alice.\nend note\nnote left of Bob\n <u:red>This</u> is <color #118888>displayed</color>\n **<color purple>left of</color> <s:red>Alice</strike> Bob**.\nend note\nnote over Alice, Bob\n <w:#FF33FF>This is hosted</w> by <img sourceforge.jpg>\nend note\n@enduml\n```"
},
"spoiler": {
"title": "Spoiler",
"description": "Hide information by using a spoiler tag.",
"example": ":::spoiler This spoiler contains a surprise.\nSURPRISE!\n:::"
},
"toc": {
"title": "Table Of Contents",
"basic": {
"title": "Basic",
"description": "Add a table of contents that is automatically generated using your headlines by adding `[toc]` into a single line.",
"example": "[toc]\n\n# This is a first headline\n\n## This is a second headline"
},
"levelLimit": {
"title": "Level limits",
"description": "You can limit the levels of the headlines the TOC should show",
"example": "[toc:2:3]\n\n# This is a first headline\n\n## This is a second headline\n\n### This is a third headline\n\n#### This is a fourth headline"
}
},
"vegaLite": {
"title": "Vega Lite",
"description": "Render diagrams and charts using vega lite by adding a code block with the language `vega-lite`",
"example": "```vega-lite\n{\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"description\": \"Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm\",\n \"data\": {\n \"values\": [\n {\"category\": \"Sky\", \"value\": 75, \"order\": 3},\n {\"category\": \"Shady side of a pyramid\", \"value\": 10, \"order\": 1},\n {\"category\": \"Sunny side of a pyramid\", \"value\": 15, \"order\": 2}\n ]\n },\n \"mark\": {\"type\": \"arc\", \"outerRadius\": 80},\n \"encoding\": {\n \"theta\": {\n \"field\": \"value\", \"type\": \"quantitative\",\n \"scale\": {\"range\": [2.35619449, 8.639379797]},\n \"stack\": true\n },\n \"color\": {\n \"field\": \"category\", \"type\": \"nominal\",\n \"scale\": {\n \"domain\": [\"Sky\", \"Shady side of a pyramid\", \"Sunny side of a pyramid\"],\n \"range\": [\"#416D9D\", \"#674028\", \"#DEAC58\"]\n },\n \"legend\": {\n \"orient\": \"none\",\n \"title\": null,\n \"columns\": 1,\n \"legendX\": 200,\n \"legendY\": 80\n }\n },\n \"order\": {\n \"field\": \"order\"\n }\n },\n \"view\": {\"stroke\": null}\n}\n```"
},
"vimeo": {
"title": "Vimeo",
"description": "Embed a Vimeo video by placing the URL in a single line.",
"example": "https://vimeo.com/23237102"
},
"youtube": {
"title": "YouTube",
"description": "Embed a YouTube video by placing the URL in a single line.",
"example": "https://www.youtube.com/watch?v=YE7VzlLtp-4"
},
"taskList": {
"title": "Task Lists",
"description": "You can turn any listing into a task list by adding brackets. The checkboxes in the rendering change the markdown content if clicked.",
"example": "- [ ] ToDos\n - [X] Buy some salad\n - [ ] Brush teeth\n - [x] Drink some water\n - [ ] **Click my box** and see the source code, if you're allowed to edit!\n"
},
"codeHighlighting": {
"title": "Code Highlighting",
"language": {
"title": "Language",
"description": "Specify a language after the start tag of a code block to activate code highlighting.",
"example": "```js\nvar s = \"JavaScript syntax highlighting\";\nalert(s);\nfunction $initHighlight(block, cls) {\n try {\n if (cls.search(/\\bno\\-highlight\\b/) != -1)\n return process(block, true, 0x0F) +\n ' class=\"\"';\n } catch (e) {\n /* handle exception */\n }\n for (var i = 0 / 2; i < classes.length; i++) {\n if (checkCondition(classes[i]) === undefined)\n return /\\d+[\\s/]/g;\n }\n}\n```"
},
"lineWrapping": {
"title": "Line wrapping",
"description": "Set an exclamation mark to activate line wrapping",
"example": "```text\naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n```\n\n```text!\naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n```"
},
"lineNumbers": {
"title": "Line numbers",
"description": "Set a equals sign after the language to show line numbers. You can specify a start line number after the equal sign or a plus to continue the line numbers from the last code block.",
"example": "```markdown=12\nline1\n```\n```markdown=+\nline2\n```\n```markdown=\nline3\n```"
}
}
}
}

2
frontend/src/components/editor-page/app-bar/app-bar.tsx
View file

@ -10,6 +10,7 @@ import { ShowIf } from '../../common/show-if/show-if'
import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
import { UserDropdown } from '../../landing-layout/navigation/user-dropdown'
import { SettingsButton } from '../../layout/settings-dialog/settings-button'
import { CheatsheetButton } from './cheatsheet/cheatsheet-button'
import { HelpButton } from './help-button/help-button'
import { NavbarBranding } from './navbar-branding'
import { ReadOnlyModeButton } from './read-only-mode-button'
@ -47,6 +48,7 @@ export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
<ReadOnlyModeButton />
</ShowIf>
<HelpButton />
<CheatsheetButton />
</ShowIf>
</Nav>
<Nav className='d-flex gap-2 align-items-center text-secondary justify-content-end'>

73
frontend/src/components/editor-page/app-bar/cheatsheet/category-accordion.tsx Normal file
View file

@ -0,0 +1,73 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension'
import { EntryList } from './entry-list'
import React, { useMemo } from 'react'
import { Accordion } from 'react-bootstrap'
import { Trans } from 'react-i18next'
export interface GroupAccordionProps {
extensions: CheatsheetExtension[]
selectedEntry: CheatsheetExtension | undefined
onStateChange: (value: CheatsheetExtension) => void
}
const sortCategories = (
[keyA]: [string, CheatsheetExtension[]],
[keyB]: [string, CheatsheetExtension[]]
): -1 | 0 | 1 => {
if (keyA === keyB) {
return 0
} else if (keyA > keyB || keyA === 'other') {
return 1
} else {
return -1
}
}
type CheatsheetGroupMap = Map<string, CheatsheetExtension[]>
const reduceCheatsheetExtensionByCategory = (
state: CheatsheetGroupMap,
extension: CheatsheetExtension
): CheatsheetGroupMap => {
const groupKey = extension.categoryI18nKey ?? 'other'
const list = state.get(groupKey) ?? []
list.push(extension)
if (!state.has(groupKey)) {
state.set(groupKey, list)
}
return state
}
/**
* Renders {@link EntryList entry lists} grouped by category.
*
* @param extensions The extensions which should be listed
* @param selectedEntry The entry that should be displayed as selected
* @param onStateChange A callback that should be executed if a new entry was selected
*/
export const CategoryAccordion: React.FC<GroupAccordionProps> = ({ extensions, selectedEntry, onStateChange }) => {
const groupEntries = useMemo(() => {
const groupings = extensions.reduce(reduceCheatsheetExtensionByCategory, new Map<string, CheatsheetExtension[]>())
return Array.from(groupings.entries()).sort(sortCategories)
}, [extensions])
const elements = useMemo(() => {
return groupEntries.map(([groupKey, groupExtensions]) => (
<Accordion.Item eventKey={groupKey} key={groupKey}>
<Accordion.Header>
<Trans i18nKey={`cheatsheet.categories.${groupKey}`}></Trans>
</Accordion.Header>
<Accordion.Body className={'p-0'}>
<EntryList selectedEntry={selectedEntry} extensions={groupExtensions} onStateChange={onStateChange} />
</Accordion.Body>
</Accordion.Item>
))
}, [groupEntries, onStateChange, selectedEntry])
return <Accordion defaultActiveKey={groupEntries[0][0]}>{elements}</Accordion>
}

40
frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-button.tsx Normal file
View file

@ -0,0 +1,40 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
import { cypressId } from '../../../../utils/cypress-attribute'
import { CommonModal } from '../../../common/modals/common-modal'
import { CheatsheetModalBody } from './cheatsheet-modal-body'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
export const CheatsheetButton: React.FC = () => {
const { t } = useTranslation()
const [modalVisibility, showModal, closeModal] = useBooleanState()
return (
<Fragment>
<Button
{...cypressId('open.cheatsheet-button')}
title={t('cheatsheet.button') ?? undefined}
className={'mx-2'}
variant='outline-dark'
size={'sm'}
onClick={showModal}>
<Trans i18nKey={'cheatsheet.button'}></Trans>
</Button>
<CommonModal
modalSize={'xl'}
titleIcon={IconQuestionCircle}
show={modalVisibility}
onHide={closeModal}
titleI18nKey={'cheatsheet.modal.title'}>
<CheatsheetModalBody />
</CommonModal>
</Fragment>
)
}

86
frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx Normal file
View file

@ -0,0 +1,86 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import HighlightedCode from '../../../../extensions/extra-integrations/highlighted-code-fence/highlighted-code'
import { ExtensionEventEmitterProvider } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
import { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message'
import type { CheatsheetEntry } from '../../cheatsheet/cheatsheet-extension'
import { EditorToRendererCommunicatorContextProvider } from '../../render-context/editor-to-renderer-communicator-context-provider'
import { RenderIframe } from '../../renderer-pane/render-iframe'
import { ReadMoreLinkItem } from './read-more-link-item'
import { useComponentsFromAppExtensions } from './use-components-from-app-extensions'
import convertHtmlToReact from '@hedgedoc/html-to-react'
import { sanitize } from 'dompurify'
import MarkdownIt from 'markdown-it'
import React, { useEffect, useMemo, useState } from 'react'
import { ListGroupItem } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
interface CheatsheetRendererProps {
rootI18nKey?: string
extension: CheatsheetEntry
}
/**
* Renders the cheatsheet entry with description, example and redered example.
*
* @param extension The extension to render
* @param rootI18nKey An additional i18n namespace
*/
export const CheatsheetEntryPane: React.FC<CheatsheetRendererProps> = ({ extension, rootI18nKey }) => {
const { t } = useTranslation()
const [content, setContent] = useState('')
const lines = useMemo(() => content.split('\n'), [content])
const i18nPrefix = useMemo(
() => `cheatsheet.${rootI18nKey ? `${rootI18nKey}.` : ''}${extension.i18nKey}.`,
[extension.i18nKey, rootI18nKey]
)
useEffect(() => {
setContent(t(`${i18nPrefix}example`) ?? '')
}, [extension, i18nPrefix, t])
const cheatsheetExtensionComponents = useComponentsFromAppExtensions(setContent)
const descriptionElements = useMemo(() => {
const content = t(`${i18nPrefix}description`)
const markdownIt = new MarkdownIt('default')
return convertHtmlToReact(sanitize(markdownIt.render(content)))
}, [i18nPrefix, t])
return (
<EditorToRendererCommunicatorContextProvider>
<ExtensionEventEmitterProvider>
{cheatsheetExtensionComponents}
<ListGroupItem>
<h4>
<Trans i18nKey={'cheatsheet.modal.headlines.description'} />
</h4>
{descriptionElements}
</ListGroupItem>
<ReadMoreLinkItem url={extension.readMoreUrl}></ReadMoreLinkItem>
<ListGroupItem>
<h4>
<Trans i18nKey={'cheatsheet.modal.headlines.exampleInput'} />
</h4>
<HighlightedCode code={content} wrapLines={true} language={'markdown'} startLineNumber={1} />
</ListGroupItem>
<ListGroupItem>
<h4>
<Trans i18nKey={'cheatsheet.modal.headlines.exampleOutput'} />
</h4>
<RenderIframe
frameClasses={'w-100'}
adaptFrameHeightToContent={true}
rendererType={RendererType.MOTD}
markdownContentLines={lines}></RenderIframe>
</ListGroupItem>
</ExtensionEventEmitterProvider>
</EditorToRendererCommunicatorContextProvider>
)
}

60
frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-modal-body.tsx Normal file
View file

@ -0,0 +1,60 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { optionalAppExtensions } from '../../../../extensions/extra-integrations/optional-app-extensions'
import { ShowIf } from '../../../common/show-if/show-if'
import type { CheatsheetEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension'
import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension'
import { CategoryAccordion } from './category-accordion'
import { CheatsheetEntryPane } from './cheatsheet-entry-pane'
import { TopicSelection } from './topic-selection'
import React, { useCallback, useMemo, useState } from 'react'
import { Col, ListGroup, Modal, Row } from 'react-bootstrap'
/**
* Renders the tab content for the cheatsheet.
*/
export const CheatsheetModalBody: React.FC = () => {
const [selectedExtension, setSelectedExtension] = useState<CheatsheetExtension>()
const [selectedEntry, setSelectedEntry] = useState<CheatsheetEntry>()
const changeExtension = useCallback((value: CheatsheetExtension) => {
setSelectedExtension(value)
setSelectedEntry(isCheatsheetGroup(value) ? value.entries[0] : value)
}, [])
const extensions = useMemo(
() => optionalAppExtensions.flatMap((extension) => extension.buildCheatsheetExtensions()),
[]
)
return (
<Modal.Body>
<Row className={`mt-2`}>
<Col xs={3}>
<CategoryAccordion
extensions={extensions}
selectedEntry={selectedExtension}
onStateChange={changeExtension}
/>
</Col>
<Col xs={9}>
<ListGroup>
<TopicSelection
extension={selectedExtension}
selectedEntry={selectedEntry}
setSelectedEntry={setSelectedEntry}></TopicSelection>
<ShowIf condition={selectedEntry !== undefined}>
<CheatsheetEntryPane
rootI18nKey={isCheatsheetGroup(selectedExtension) ? selectedExtension.i18nKey : undefined}
extension={selectedEntry as CheatsheetEntry}
/>
</ShowIf>
</ListGroup>
</Col>
</Row>
</Modal.Body>
)
}

6
frontend/src/components/editor-page/app-bar/help-button/cheatsheet.module.scss → frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet.module.scss
View file

@ -7,3 +7,9 @@
.table-cheatsheet > tr > td {
vertical-align: middle !important;
}
.sticky {
position: sticky;
top: 1rem;
bottom: 1rem;
}

50
frontend/src/components/editor-page/app-bar/cheatsheet/entry-list.tsx Normal file
View file

@ -0,0 +1,50 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension'
import styles from './cheatsheet.module.scss'
import React, { useMemo } from 'react'
import { ListGroup, ListGroupItem } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
interface CheatsheetListProps {
selectedEntry: CheatsheetExtension | undefined
extensions: CheatsheetExtension[]
onStateChange: (value: CheatsheetExtension) => void
}
const compareString = (value1: string, value2: string): -1 | 0 | 1 => {
return value1 === value2 ? 0 : value1 < value2 ? -1 : 1
}
/**
* Renders a list of cheatsheet entries.
*
* @param extensions The extensions whose cheatsheet entries should be listed
* @param selectedEntry The cheatsheet entry that should be rendered as selected.
* @param onStateChange A callback that is executed when a new entry has been selected
*/
export const EntryList: React.FC<CheatsheetListProps> = ({ extensions, selectedEntry, onStateChange }) => {
const { t } = useTranslation()
const listItems = useMemo(
() =>
extensions
.map((extension) => [extension, t(`cheatsheet.${extension.i18nKey}.title`)] as [CheatsheetExtension, string])
.sort(([, title1], [, title2]) => compareString(title1.toLowerCase(), title2.toLowerCase()))
.map(([cheatsheetExtension, title]) => (
<ListGroupItem
key={cheatsheetExtension.i18nKey}
action
active={cheatsheetExtension.i18nKey == selectedEntry?.i18nKey}
onClick={() => onStateChange(cheatsheetExtension)}>
{title}
</ListGroupItem>
)),
[extensions, onStateChange, selectedEntry, t]
)
return <ListGroup className={styles.sticky}>{listItems}</ListGroup>
}

29
frontend/src/components/editor-page/app-bar/cheatsheet/read-more-link-item.tsx Normal file
View file

@ -0,0 +1,29 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ExternalLink } from '../../../common/links/external-link'
import React from 'react'
import { ListGroupItem } from 'react-bootstrap'
import { Trans } from 'react-i18next'
export interface ReadMoreLinkGroupProps {
url: URL | undefined
}
/**
* Renders the read more URL as external link.
*
* @param url The URL to display. If the URL is undefined then nothing will be rendered.
*/
export const ReadMoreLinkItem: React.FC<ReadMoreLinkGroupProps> = ({ url }) => {
return !url ? null : (
<ListGroupItem>
<h4>
<Trans i18nKey={'cheatsheet.modal.headlines.readMoreLink'} />
</h4>
<ExternalLink className={'text-dark'} text={url.toString()} href={url.toString()}></ExternalLink>
</ListGroupItem>
)
}

49
frontend/src/components/editor-page/app-bar/cheatsheet/topic-selection.tsx Normal file
View file

@ -0,0 +1,49 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension'
import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension'
import React, { useMemo } from 'react'
import { Button, ButtonGroup, ListGroupItem } from 'react-bootstrap'
import { Trans } from 'react-i18next'
interface EntrySelectionProps {
extension: CheatsheetExtension | undefined
selectedEntry: CheatsheetEntry | undefined
setSelectedEntry: (value: CheatsheetEntry) => void
}
/**
* Renders a button group that contains the topics of the given extension.
* If the extension has no topics then the selection won't be displayed.
*
* @param extension The extension whose topics should be displayed
* @param selectedEntry The currently selected cheatsheet entry that should be displayed as active
* @param setSelectedEntry A callback that should be executed if a new topic has been selected
*/
export const TopicSelection: React.FC<EntrySelectionProps> = ({ extension, selectedEntry, setSelectedEntry }) => {
const listItems = useMemo(() => {
if (!isCheatsheetGroup(extension)) {
return null
}
return extension.entries.map((entry) => (
<Button
key={entry.i18nKey}
variant={selectedEntry?.i18nKey === entry.i18nKey ? 'primary' : 'outline-primary'}
onClick={() => setSelectedEntry(entry)}>
<Trans i18nKey={`cheatsheet.${extension.i18nKey}.${entry.i18nKey}.title`}></Trans>
</Button>
))
}, [extension, selectedEntry?.i18nKey, setSelectedEntry])
return !listItems ? null : (
<ListGroupItem>
<h4>
<Trans i18nKey={'cheatsheet.modal.headlines.selectTopic'} />
</h4>
<ButtonGroup className={'mb-2'}>{listItems}</ButtonGroup>
</ListGroupItem>
)
}

32
frontend/src/components/editor-page/app-bar/cheatsheet/use-components-from-app-extensions.tsx Normal file
View file

@ -0,0 +1,32 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { optionalAppExtensions } from '../../../../extensions/extra-integrations/optional-app-extensions'
import type { CheatsheetExtensionComponentProps } from '../../cheatsheet/cheatsheet-extension'
import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension'
import type { ReactElement } from 'react'
import React, { Fragment, useMemo } from 'react'
/**
* Generates react elements from components which are provided by cheatsheet extensions.
*/
export const useComponentsFromAppExtensions = (
setContent: CheatsheetExtensionComponentProps['setContent']
): ReactElement => {
return useMemo(() => {
return (
<Fragment key={'app-extensions'}>
{optionalAppExtensions
.flatMap((extension) => extension.buildCheatsheetExtensions())
.flatMap((extension) => (isCheatsheetGroup(extension) ? extension.entries : extension))
.map((extension) => {
if (extension.cheatsheetExtensionComponent) {
return React.createElement(extension.cheatsheetExtensionComponent, { key: extension.i18nKey, setContent })
}
})}
</Fragment>
)
}, [setContent])
}

67
frontend/src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx
View file

@ -1,67 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { TaskCheckedEventPayload } from '../../../../extensions/extra-integrations/task-list/event-emitting-task-list-checkbox'
import { TaskListCheckboxAppExtension } from '../../../../extensions/extra-integrations/task-list/task-list-checkbox-app-extension'
import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
import { eventEmitterContext } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
import type { Listener } from 'eventemitter2'
import { EventEmitter2 } from 'eventemitter2'
import React, { Suspense, useEffect, useMemo } from 'react'
export interface CheatsheetLineProps {
markdown: string
onTaskCheckedChange: (newValue: boolean) => void
}
const HighlightedCode = React.lazy(
() => import('../../../../extensions/extra-integrations/highlighted-code-fence/highlighted-code')
)
const DocumentMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/document-markdown-renderer'))
/**
* Renders one line in the {@link CheatsheetTabContent cheat sheet}.
* This line shows an minimal markdown example and how it would be rendered.
*
* @param markdown The markdown to be shown and rendered
* @param onTaskCheckedChange A callback to call if a task would be clicked
*/
export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ markdown, onTaskCheckedChange }) => {
const lines = useMemo(() => markdown.split('\n'), [markdown])
const eventEmitter = useMemo(() => new EventEmitter2(), [])
useEffect(() => {
const handler = eventEmitter.on(
TaskListCheckboxAppExtension.EVENT_NAME,
({ checked }: TaskCheckedEventPayload) => onTaskCheckedChange(checked),
{ objectify: true }
) as Listener
return () => {
handler.off()
}
})
return (
<Suspense
fallback={
<tr>
<td colSpan={2}>
<WaitSpinner />
</td>
</tr>
}>
<tr>
<td>
<eventEmitterContext.Provider value={eventEmitter}>
<DocumentMarkdownRenderer markdownContentLines={lines} baseUrl={'https://example.org'} />
</eventEmitterContext.Provider>
</td>
<td className={'markdown-body'}>
<HighlightedCode code={markdown} wrapLines={true} startLineNumber={1} language={'markdown'} />
</td>
</tr>
</Suspense>
)
}

64
frontend/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx
View file

@ -1,64 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { CheatsheetLine } from './cheatsheet-line'
import styles from './cheatsheet.module.scss'
import React, { useMemo, useState } from 'react'
import { Table } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
/**
* Renders the content of the cheat sheet for the {@link HelpModal}.
*/
export const CheatsheetTabContent: React.FC = () => {
const { t } = useTranslation()
const [checked, setChecked] = useState<boolean>(false)
const codes = useMemo(
() => [
`**${t('editor.editorToolbar.bold')}**`,
`*${t('editor.editorToolbar.italic')}*`,
`++${t('editor.editorToolbar.underline')}++`,
`~~${t('editor.editorToolbar.strikethrough')}~~`,
'H~2~O',
'19^th^',
`==${t('editor.help.cheatsheet.highlightedText')}==`,
`# ${t('editor.editorToolbar.header')}`,
`\`${t('editor.editorToolbar.code')}\``,
'```javascript=\nvar x = 5;\n```',
`> ${t('editor.editorToolbar.blockquote')}`,
`- ${t('editor.editorToolbar.unorderedList')}`,
`1. ${t('editor.editorToolbar.orderedList')}`,
`- [${checked ? 'x' : ' '}] ${t('editor.editorToolbar.checkList')}`,
`[${t('editor.editorToolbar.link')}](https://example.com)`,
`![${t('editor.editorToolbar.image')}](/icons/apple-touch-icon.png)`,
':smile:',
':bi-bootstrap:',
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
],
[checked, t]
)
return (
<Table className={`table-condensed ${styles['table-cheatsheet']}`}>
<thead>
<tr>
<th>
<Trans i18nKey='editor.help.cheatsheet.example' />
</th>
<th>
<Trans i18nKey='editor.help.cheatsheet.syntax' />
</th>
</tr>
</thead>
<tbody>
{codes.map((code) => (
<CheatsheetLine markdown={code} key={code} onTaskCheckedChange={setChecked} />
))}
</tbody>
</Table>
)
}
export default CheatsheetTabContent

16
frontend/src/components/editor-page/app-bar/help-button/help-button.tsx
View file

@ -5,12 +5,11 @@
*/
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
import { cypressId } from '../../../../utils/cypress-attribute'
import { UiIcon } from '../../../common/icons/ui-icon'
import { IconButton } from '../../../common/icon-button/icon-button'
import { HelpModal } from './help-modal'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
/**
* Renders the button to open the {@link HelpModal}.
@ -21,15 +20,16 @@ export const HelpButton: React.FC = () => {
return (
<Fragment>
<Button
<IconButton
icon={IconQuestionCircle}
{...cypressId('editor-help-button')}
title={t('editor.documentBar.help') ?? undefined}
className='ms-2 text-secondary'
className='ms-2'
size='sm'
variant='outline-light'
variant='outline-dark'
onClick={showModal}>
<UiIcon icon={IconQuestionCircle} />
</Button>
<Trans i18nKey={'editor.documentBar.help'}></Trans>
</IconButton>
<HelpModal show={modalVisibility} onHide={closeModal} />
</Fragment>
)

14
frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
View file

@ -5,7 +5,6 @@
*/
import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
import { CommonModal } from '../../../common/modals/common-modal'
import { CheatsheetTabContent } from './cheatsheet-tab-content'
import { LinksTabContent } from './links-tab-content'
import { ShortcutTabContent } from './shortcuts-tab-content'
import React, { useMemo, useState } from 'react'
@ -14,7 +13,6 @@ import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
export enum HelpTabStatus {
Cheatsheet = 'cheatsheet.title',
Shortcuts = 'shortcuts.title',
Links = 'links.title'
}
@ -31,13 +29,11 @@ export enum HelpTabStatus {
* @param onHide A callback when the modal should be closed again
*/
export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
const [tab, setTab] = useState<HelpTabStatus>(HelpTabStatus.Cheatsheet)
const [tab, setTab] = useState<HelpTabStatus>(HelpTabStatus.Shortcuts)
const { t } = useTranslation()
const tabContent = useMemo(() => {
switch (tab) {
case HelpTabStatus.Cheatsheet:
return <CheatsheetTabContent />
case HelpTabStatus.Shortcuts:
return <ShortcutTabContent />
case HelpTabStatus.Links:
@ -48,15 +44,9 @@ export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
const modalTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${tab}`), [t, tab])
return (
<CommonModal modalSize={'lg'} titleIcon={IconQuestionCircle} show={show} onHide={onHide} title={modalTitle}>
<CommonModal modalSize={'xl'} titleIcon={IconQuestionCircle} show={show} onHide={onHide} title={modalTitle}>
<Modal.Body>
<nav className='nav nav-tabs'>
<Button
variant={'light'}
className={`nav-link nav-item ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
onClick={() => setTab(HelpTabStatus.Cheatsheet)}>
<Trans i18nKey={'editor.help.cheatsheet.title'} />
</Button>
<Button
variant={'light'}
className={`nav-link nav-item ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}

30
frontend/src/components/editor-page/cheatsheet/cheatsheet-extension.ts Normal file
View file

@ -0,0 +1,30 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type React from 'react'
export interface CheatsheetExtensionComponentProps {
setContent: (dispatcher: string | ((prevState: string) => string)) => void
}
export type CheatsheetExtension = CheatsheetEntry | CheatsheetGroup
export const isCheatsheetGroup = (extension: CheatsheetExtension | undefined): extension is CheatsheetGroup => {
return (extension as CheatsheetGroup)?.entries !== undefined
}
export interface CheatsheetGroup {
i18nKey: string
categoryI18nKey?: string
entries: CheatsheetEntry[]
}
export interface CheatsheetEntry {
i18nKey: string
categoryI18nKey?: string
cheatsheetExtensionComponent?: React.FC<CheatsheetExtensionComponentProps>
readMoreUrl?: URL
}

64
frontend/src/components/markdown-renderer/extensions/basic-markdown-syntax/basic-markdown-syntax-app-extension.ts Normal file
View file

@ -0,0 +1,64 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { BasicMarkdownSyntaxMarkdownExtension } from './basic-markdown-syntax-markdown-extension'
export class BasicMarkdownSyntaxAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new BasicMarkdownSyntaxMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'basics.formatting',
categoryI18nKey: 'basic',
entries: [
{
i18nKey: 'basic'
},
{
i18nKey: 'abbreviation'
},
{ i18nKey: 'footnote' }
]
},
{
i18nKey: 'basics.headlines',
categoryI18nKey: 'basic',
entries: [
{
i18nKey: 'hashtag'
},
{
i18nKey: 'equal'
}
]
},
{
i18nKey: 'basics.code',
categoryI18nKey: 'basic',
entries: [{ i18nKey: 'inline' }, { i18nKey: 'block' }]
},
{
i18nKey: 'basics.lists',
categoryI18nKey: 'basic',
entries: [{ i18nKey: 'unordered' }, { i18nKey: 'ordered' }]
},
{
i18nKey: 'basics.images',
categoryI18nKey: 'basic',
entries: [{ i18nKey: 'basic' }, { i18nKey: 'size' }]
},
{
i18nKey: 'basics.links',
categoryI18nKey: 'basic'
}
]
}
}

4
frontend/src/components/markdown-renderer/extensions/generic-syntax-markdown-extension.ts → frontend/src/components/markdown-renderer/extensions/basic-markdown-syntax/basic-markdown-syntax-markdown-extension.ts
View file

@ -3,7 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { MarkdownRendererExtension } from './base/markdown-renderer-extension'
import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { imageSize } from '@hedgedoc/markdown-it-plugins'
import type MarkdownIt from 'markdown-it'
import abbreviation from 'markdown-it-abbr'
@ -17,7 +17,7 @@ import superscript from 'markdown-it-sup'
/**
* Adds some common markdown syntaxes to the markdown rendering.
*/
export class GenericSyntaxMarkdownExtension extends MarkdownRendererExtension {
export class BasicMarkdownSyntaxMarkdownExtension extends MarkdownRendererExtension {
public configureMarkdownIt(markdownIt: MarkdownIt): void {
abbreviation(markdownIt)
definitionList(markdownIt)

19
frontend/src/components/markdown-renderer/extensions/bootstrap-icons/bootstrap-icon-app-extension.ts Normal file
View file

@ -0,0 +1,19 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { BootstrapIconMarkdownExtension } from './bootstrap-icon-markdown-extension'
export class BootstrapIconAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new BootstrapIconMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'bootstrapIcon', readMoreUrl: new URL('https://icons.getbootstrap.com/') }]
}
}

24
frontend/src/components/markdown-renderer/extensions/emoji/emoji-app-extension.ts Normal file
View file

@ -0,0 +1,24 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { EmojiMarkdownExtension } from './emoji-markdown-extension'
export class EmojiAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new EmojiMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'emoji',
readMoreUrl: new URL('https://twemoji.twitter.com/')
}
]
}
}

24
frontend/src/components/markdown-renderer/extensions/iframe-capsule/iframe-capsule-app-extension.ts Normal file
View file

@ -0,0 +1,24 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { IframeCapsuleMarkdownExtension } from './iframe-capsule-markdown-extension'
export class IframeCapsuleAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new IframeCapsuleMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'iframeCapsule',
categoryI18nKey: 'embedding'
}
]
}
}

23
frontend/src/components/markdown-renderer/extensions/image-placeholder/image-placeholder-app-extension.ts Normal file
View file

@ -0,0 +1,23 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { ImagePlaceholderMarkdownExtension } from './image-placeholder-markdown-extension'
export class ImagePlaceholderAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new ImagePlaceholderMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'imagePlaceholder'
}
]
}
}

32
frontend/src/components/markdown-renderer/extensions/table-of-contents/table-of-contents-app-extension.ts Normal file
View file

@ -0,0 +1,32 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AppExtension } from '../../../../extensions/base/app-extension'
import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import { TableOfContentsMarkdownExtension } from './table-of-contents-markdown-extension'
import type EventEmitter2 from 'eventemitter2'
export class TableOfContentsAppExtension extends AppExtension {
buildMarkdownRendererExtensions(eventEmitter?: EventEmitter2): MarkdownRendererExtension[] {
return [new TableOfContentsMarkdownExtension(eventEmitter)]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'toc',
entries: [
{
i18nKey: 'basic'
},
{
i18nKey: 'levelLimit'
}
]
}
]
}
}

6
frontend/src/components/markdown-renderer/extensions/table-of-contents-markdown-extension.ts → frontend/src/components/markdown-renderer/extensions/table-of-contents/table-of-contents-markdown-extension.ts
View file

@ -1,10 +1,10 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { tocSlugify } from '../../editor-page/table-of-contents/toc-slugify'
import { MarkdownRendererExtension } from './base/markdown-renderer-extension'
import { tocSlugify } from '../../../editor-page/table-of-contents/toc-slugify'
import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
import type { TocAst } from '@hedgedoc/markdown-it-plugins'
import { toc } from '@hedgedoc/markdown-it-plugins'
import equal from 'fast-deep-equal'

22
frontend/src/components/markdown-renderer/hooks/use-markdown-extensions.ts
View file

@ -5,27 +5,17 @@
*/
import { optionalAppExtensions } from '../../../extensions/extra-integrations/optional-app-extensions'
import type { MarkdownRendererExtension } from '../extensions/base/markdown-renderer-extension'
import { BootstrapIconMarkdownExtension } from '../extensions/bootstrap-icons/bootstrap-icon-markdown-extension'
import { DebuggerMarkdownExtension } from '../extensions/debugger-markdown-extension'
import { EmojiMarkdownExtension } from '../extensions/emoji/emoji-markdown-extension'
import { GenericSyntaxMarkdownExtension } from '../extensions/generic-syntax-markdown-extension'
import { IframeCapsuleMarkdownExtension } from '../extensions/iframe-capsule/iframe-capsule-markdown-extension'
import { ImagePlaceholderMarkdownExtension } from '../extensions/image-placeholder/image-placeholder-markdown-extension'
import { ProxyImageMarkdownExtension } from '../extensions/image/proxy-image-markdown-extension'
import type { LineMarkers } from '../extensions/linemarker/add-line-marker-markdown-it-plugin'
import { LinemarkerMarkdownExtension } from '../extensions/linemarker/linemarker-markdown-extension'
import { LinkAdjustmentMarkdownExtension } from '../extensions/link-replacer/link-adjustment-markdown-extension'
import { LinkifyFixMarkdownExtension } from '../extensions/linkify-fix/linkify-fix-markdown-extension'
import { TableOfContentsMarkdownExtension } from '../extensions/table-of-contents-markdown-extension'
import { UploadIndicatingImageFrameMarkdownExtension } from '../extensions/upload-indicating-image-frame/upload-indicating-image-frame-markdown-extension'
import { useExtensionEventEmitter } from './use-extension-event-emitter'
import type { MutableRefObject } from 'react'
import { useMemo } from 'react'
const optionalMarkdownRendererExtensions = optionalAppExtensions.flatMap((value) =>
value.buildMarkdownRendererExtensions()
)
/**
* Provides a list of {@link MarkdownRendererExtension markdown extensions} that is a combination of the common extensions and the given additional.
*
@ -40,22 +30,20 @@ export const useMarkdownExtensions = (
additionalExtensions: MarkdownRendererExtension[]
): MarkdownRendererExtension[] => {
const extensionEventEmitter = useExtensionEventEmitter()
//replace with global list
return useMemo(() => {
const optionalMarkdownRendererExtensions = optionalAppExtensions.flatMap((value) =>
value.buildMarkdownRendererExtensions(extensionEventEmitter)
)
return [
...optionalMarkdownRendererExtensions,
...additionalExtensions,
new TableOfContentsMarkdownExtension(extensionEventEmitter),
new LinemarkerMarkdownExtension(
currentLineMarkers ? (lineMarkers) => (currentLineMarkers.current = lineMarkers) : undefined
),
new IframeCapsuleMarkdownExtension(),
new ImagePlaceholderMarkdownExtension(),
new UploadIndicatingImageFrameMarkdownExtension(),
new LinkAdjustmentMarkdownExtension(baseUrl),
new EmojiMarkdownExtension(),
new BootstrapIconMarkdownExtension(),
new GenericSyntaxMarkdownExtension(),
new LinkifyFixMarkdownExtension(),
new DebuggerMarkdownExtension(),
new ProxyImageMarkdownExtension()

2
frontend/src/components/render-page/document-toc-sidebar.tsx
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ShowIf } from '../common/show-if/show-if'
import { TableOfContentsMarkdownExtension } from '../markdown-renderer/extensions/table-of-contents-markdown-extension'
import { TableOfContentsMarkdownExtension } from '../markdown-renderer/extensions/table-of-contents/table-of-contents-markdown-extension'
import { useExtensionEventEmitterHandler } from '../markdown-renderer/hooks/use-extension-event-emitter'
import styles from './markdown-document.module.scss'
import { WidthBasedTableOfContents } from './width-based-table-of-contents'

5
frontend/src/extensions/base/app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { Linter } from '../../components/editor-page/editor-pane/linter/linter'
import type { MarkdownRendererExtension } from '../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import type { EventEmitter2 } from 'eventemitter2'
@ -22,4 +23,8 @@ export abstract class AppExtension {
public buildEditorExtensionComponent(): React.FC {
return Fragment
}
public buildCheatsheetExtensions(): CheatsheetExtension[] {
return []
}
}

5
frontend/src/extensions/extra-integrations/abcjs/abcjs-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { AbcjsMarkdownExtension } from './abcjs-markdown-extension'
@ -11,4 +12,8 @@ export class AbcjsAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new AbcjsMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'abcjs', categoryI18nKey: 'charts', readMoreUrl: new URL('https://www.abcjs.net/') }]
}
}

5
frontend/src/extensions/extra-integrations/alert/alert-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { AlertMarkdownExtension } from './alert-markdown-extension'
@ -14,4 +15,8 @@ export class AlertAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new AlertMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'alert' }]
}
}

5
frontend/src/extensions/extra-integrations/asciinema/asciinema-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { AsciinemaMarkdownExtension } from './asciinema-markdown-extension'
@ -16,4 +17,8 @@ export class AsciinemaAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new AsciinemaMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'asciinema', categoryI18nKey: 'embedding', readMoreUrl: new URL('https://asciinema.org/') }]
}
}

5
frontend/src/extensions/extra-integrations/blockquote/blockquote-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { BlockquoteExtraTagMarkdownExtension } from './blockquote-extra-tag-markdown-extension'
@ -14,4 +15,8 @@ export class BlockquoteAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new BlockquoteExtraTagMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'blockquoteTags', entries: [{ i18nKey: 'name' }, { i18nKey: 'color' }, { i18nKey: 'time' }] }]
}
}

5
frontend/src/extensions/extra-integrations/csv/csv-table-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { CsvTableMarkdownExtension } from './csv-table-markdown-extension'
@ -14,4 +15,8 @@ export class CsvTableAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new CsvTableMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'csv', entries: [{ i18nKey: 'table' }, { i18nKey: 'header' }] }]
}
}

5
frontend/src/extensions/extra-integrations/flowchart/flowchart-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { FlowchartMarkdownExtension } from './flowchart-markdown-extension'
@ -14,4 +15,8 @@ export class FlowchartAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new FlowchartMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'flowchart', categoryI18nKey: 'charts', readMoreUrl: new URL('https://flowchart.js.org/') }]
}
}

5
frontend/src/extensions/extra-integrations/gist/gist-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { GistMarkdownExtension } from './gist-markdown-extension'
@ -14,4 +15,8 @@ export class GistAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new GistMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'gist', categoryI18nKey: 'embedding', readMoreUrl: new URL('https://gist.github.com/') }]
}
}

5
frontend/src/extensions/extra-integrations/graphviz/graphviz-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { GraphvizMarkdownExtension } from './graphviz-markdown-extension'
@ -14,4 +15,8 @@ export class GraphvizAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new GraphvizMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'graphviz', categoryI18nKey: 'charts', readMoreUrl: new URL('https://graphviz.org/') }]
}
}

10
frontend/src/extensions/extra-integrations/highlighted-code-fence/highlighted-code-fence-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { HighlightedCodeMarkdownExtension } from './highlighted-code-markdown-extension'
@ -14,4 +15,13 @@ export class HighlightedCodeFenceAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new HighlightedCodeMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{
i18nKey: 'codeHighlighting',
entries: [{ i18nKey: 'language' }, { i18nKey: 'lineNumbers' }, { i18nKey: 'lineWrapping' }]
}
]
}
}

5
frontend/src/extensions/extra-integrations/katex/katex-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { KatexMarkdownExtension } from './katex-markdown-extension'
@ -16,4 +17,8 @@ export class KatexAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new KatexMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'katex', readMoreUrl: new URL('https://katex.org/') }]
}
}

5
frontend/src/extensions/extra-integrations/mermaid/mermaid-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { MermaidMarkdownExtension } from './mermaid-markdown-extension'
@ -14,4 +15,8 @@ export class MermaidAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new MermaidMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'mermaid', categoryI18nKey: 'charts', readMoreUrl: new URL('https://mermaid.js.org/') }]
}
}

14
frontend/src/extensions/extra-integrations/optional-app-extensions.ts
View file

@ -3,6 +3,12 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { BasicMarkdownSyntaxAppExtension } from '../../components/markdown-renderer/extensions/basic-markdown-syntax/basic-markdown-syntax-app-extension'
import { BootstrapIconAppExtension } from '../../components/markdown-renderer/extensions/bootstrap-icons/bootstrap-icon-app-extension'
import { EmojiAppExtension } from '../../components/markdown-renderer/extensions/emoji/emoji-app-extension'
import { IframeCapsuleAppExtension } from '../../components/markdown-renderer/extensions/iframe-capsule/iframe-capsule-app-extension'
import { ImagePlaceholderAppExtension } from '../../components/markdown-renderer/extensions/image-placeholder/image-placeholder-app-extension'
import { TableOfContentsAppExtension } from '../../components/markdown-renderer/extensions/table-of-contents/table-of-contents-app-extension'
import type { AppExtension } from '../base/app-extension'
import { AbcjsAppExtension } from './abcjs/abcjs-app-extension'
import { AlertAppExtension } from './alert/alert-app-extension'
@ -48,5 +54,11 @@ export const optionalAppExtensions: AppExtension[] = [
new YoutubeAppExtension(),
new TaskListCheckboxAppExtension(),
new HighlightedCodeFenceAppExtension(),
new ForkAwesomeHtmlTagAppExtension()
new ForkAwesomeHtmlTagAppExtension(),
new BootstrapIconAppExtension(),
new EmojiAppExtension(),
new TableOfContentsAppExtension(),
new ImagePlaceholderAppExtension(),
new IframeCapsuleAppExtension(),
new BasicMarkdownSyntaxAppExtension()
]

5
frontend/src/extensions/extra-integrations/plantuml/plantuml-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { PlantumlMarkdownExtension } from './plantuml-markdown-extension'
@ -16,4 +17,8 @@ export class PlantumlAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new PlantumlMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'plantuml', categoryI18nKey: 'charts', readMoreUrl: new URL('https://plantuml.com/') }]
}
}

5
frontend/src/extensions/extra-integrations/spoiler/spoiler-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { SpoilerMarkdownExtension } from './spoiler-markdown-extension'
@ -16,4 +17,8 @@ export class SpoilerAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new SpoilerMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'spoiler' }]
}
}

9
frontend/src/extensions/extra-integrations/task-list/create-checkbox-content.ts Normal file
View file

@ -0,0 +1,9 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
export const createCheckboxContent = (newCheckboxState: boolean) => {
return `[${newCheckboxState ? 'x' : ' '}]`
}

7
frontend/src/extensions/extra-integrations/task-list/event-emitting-task-list-checkbox.tsx
View file

@ -13,7 +13,7 @@ type EventEmittingTaskListCheckboxProps = Omit<TaskListProps, 'onTaskCheckedChan
export interface TaskCheckedEventPayload {
lineInMarkdown: number
checked: boolean
newCheckedState: boolean
}
/**
@ -25,7 +25,10 @@ export const EventEmittingTaskListCheckbox: React.FC<EventEmittingTaskListCheckb
const emitter = useExtensionEventEmitter()
const sendEvent: TaskCheckedChangeHandler = useCallback(
(lineInMarkdown: number, checked: boolean) => {
emitter?.emit(TaskListCheckboxAppExtension.EVENT_NAME, { lineInMarkdown, checked } as TaskCheckedEventPayload)
emitter?.emit(TaskListCheckboxAppExtension.EVENT_NAME, {
lineInMarkdown,
newCheckedState: checked
} as TaskCheckedEventPayload)
},
[emitter]
)

26
frontend/src/extensions/extra-integrations/task-list/find-checkbox-to-change.ts Normal file
View file

@ -0,0 +1,26 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Optional } from '@mrdrogdrog/optional'
const TASK_REGEX = /^(\s*(?:[-*+]|\d+[.)]) )(\[[ xX]?])/
export const findCheckBoxToChange = (
originalContent: string,
lineIndex: number
): Optional<[startIndex: number, endIndex: number]> => {
const lines = originalContent.split('\n')
const lineStartIndex = findStartIndexOfLine(lines, lineIndex)
return Optional.ofNullable(TASK_REGEX.exec(lines[lineIndex])).map(([, beforeCheckbox, oldCheckbox]) => [
lineStartIndex + beforeCheckbox.length,
lineStartIndex + beforeCheckbox.length + oldCheckbox.length
])
}
const findStartIndexOfLine = (lines: string[], wantedLineIndex: number): number => {
return lines
.map((value) => value.length)
.filter((value, index) => index < wantedLineIndex)
.reduce((state, lineLength) => state + lineLength + 1, 0)
}

31
frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-cheatsheet.tsx Normal file
View file

@ -0,0 +1,31 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtensionComponentProps } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import { useExtensionEventEmitterHandler } from '../../../components/markdown-renderer/hooks/use-extension-event-emitter'
import { createCheckboxContent } from './create-checkbox-content'
import type { TaskCheckedEventPayload } from './event-emitting-task-list-checkbox'
import { findCheckBoxToChange } from './find-checkbox-to-change'
import { TaskListCheckboxAppExtension } from './task-list-checkbox-app-extension'
import type React from 'react'
/**
* Receives task-checkbox-change events and modify the current editor content.
*/
export const SetCheckboxInCheatsheet: React.FC<CheatsheetExtensionComponentProps> = ({ setContent }) => {
useExtensionEventEmitterHandler(TaskListCheckboxAppExtension.EVENT_NAME, (event: TaskCheckedEventPayload) => {
setContent((previousContent) => {
return findCheckBoxToChange(previousContent, event.lineInMarkdown)
.map(
([startIndex, endIndex]) =>
previousContent.slice(0, startIndex) +
createCheckboxContent(event.newCheckedState) +
previousContent.slice(endIndex)
)
.orElse(previousContent)
})
})
return null
}

50
frontend/src/extensions/extra-integrations/task-list/set-checkbox-in-editor.tsx
View file

@ -3,10 +3,16 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useChangeEditorContentCallback } from '../../../components/editor-page/change-content-context/use-change-editor-content-callback'
import type { ContentEdits } from '../../../components/editor-page/editor-pane/tool-bar/formatters/types/changes'
import { useExtensionEventEmitterHandler } from '../../../components/markdown-renderer/hooks/use-extension-event-emitter'
import { store } from '../../../redux'
import { createCheckboxContent } from './create-checkbox-content'
import type { TaskCheckedEventPayload } from './event-emitting-task-list-checkbox'
import { findCheckBoxToChange } from './find-checkbox-to-change'
import { TaskListCheckboxAppExtension } from './task-list-checkbox-app-extension'
import { useSetCheckboxInEditor } from './use-set-checkbox-in-editor'
import type React from 'react'
import { useCallback } from 'react'
/**
* Receives task-checkbox-change events and modify the current editor content.
@ -16,3 +22,45 @@ export const SetCheckboxInEditor: React.FC = () => {
useExtensionEventEmitterHandler(TaskListCheckboxAppExtension.EVENT_NAME, changeCallback)
return null
}
/**
* Provides a callback that changes the state of a checkbox in a given line in the current codemirror instance.
*/
export const useSetCheckboxInEditor = () => {
const changeEditorContent = useChangeEditorContentCallback()
return useCallback(
({ lineInMarkdown, newCheckedState }: TaskCheckedEventPayload): void => {
changeEditorContent?.(({ markdownContent }) => {
const correctedLineIndex = lineInMarkdown + store.getState().noteDetails.frontmatterRendererInfo.lineOffset
const edits = findCheckBoxToChange(markdownContent, correctedLineIndex)
.map(([startIndex, endIndex]) => createCheckboxContentEdit(startIndex, endIndex, newCheckedState))
.orElse([])
return [edits, undefined]
})
},
[changeEditorContent]
)
}
/**
* Creates a {@link ContentEdits content edit} for the change of a checkbox at a given position.
*
* @param checkboxStartIndex The start index of the old checkbox code
* @param checkboxEndIndex The end index of the old checkbox code
* @param newCheckboxState The new status of the checkbox
* @return the created {@link ContentEdits edit}
*/
const createCheckboxContentEdit = (
checkboxStartIndex: number,
checkboxEndIndex: number,
newCheckboxState: boolean
): ContentEdits => {
return [
{
from: checkboxStartIndex,
to: checkboxEndIndex,
insert: createCheckboxContent(newCheckboxState)
}
]
}

6
frontend/src/extensions/extra-integrations/task-list/task-list-checkbox-app-extension.ts
View file

@ -3,7 +3,9 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import { AppExtension } from '../../base/app-extension'
import { SetCheckboxInCheatsheet } from './set-checkbox-in-cheatsheet'
import { SetCheckboxInEditor } from './set-checkbox-in-editor'
import { TaskListMarkdownExtension } from './task-list-markdown-extension'
import type { EventEmitter2 } from 'eventemitter2'
@ -22,4 +24,8 @@ export class TaskListCheckboxAppExtension extends AppExtension {
buildEditorExtensionComponent(): React.FC {
return SetCheckboxInEditor
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'taskList', cheatsheetExtensionComponent: SetCheckboxInCheatsheet }]
}
}

74
frontend/src/extensions/extra-integrations/task-list/use-set-checkbox-in-editor.tsx
View file

@ -1,74 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useChangeEditorContentCallback } from '../../../components/editor-page/change-content-context/use-change-editor-content-callback'
import type { ContentEdits } from '../../../components/editor-page/editor-pane/tool-bar/formatters/types/changes'
import { store } from '../../../redux'
import type { TaskCheckedEventPayload } from './event-emitting-task-list-checkbox'
import { Optional } from '@mrdrogdrog/optional'
import { useCallback } from 'react'
const TASK_REGEX = /(\s*(?:[-*+]|\d+[.)]) )(\[[ xX]?])/
/**
* Provides a callback that changes the state of a checkbox in a given line in the current codemirror instance.
*/
export const useSetCheckboxInEditor = () => {
const changeEditorContent = useChangeEditorContentCallback()
return useCallback(
({ lineInMarkdown, checked }: TaskCheckedEventPayload): void => {
changeEditorContent?.(({ markdownContent }) => {
const lines = markdownContent.split('\n')
const correctedLineIndex = lineInMarkdown + store.getState().noteDetails.frontmatterRendererInfo.lineOffset
const lineStartIndex = findStartIndexOfLine(lines, correctedLineIndex)
const edits = Optional.ofNullable(TASK_REGEX.exec(lines[correctedLineIndex]))
.map(([, beforeCheckbox, oldCheckbox]) => {
const checkboxStartIndex = lineStartIndex + beforeCheckbox.length
return createCheckboxContentEdit(checkboxStartIndex, oldCheckbox, checked)
})
.orElse([])
return [edits, undefined]
})
},
[changeEditorContent]
)
}
/**
* Finds the start position of the wanted line index if the given lines would be concat with new-line-characters.
*
* @param lines The lines to search through
* @param wantedLineIndex The index of the line whose start position should be found
* @return the found start position
*/
const findStartIndexOfLine = (lines: string[], wantedLineIndex: number): number => {
return lines
.map((value) => value.length)
.filter((value, index) => index < wantedLineIndex)
.reduce((state, lineLength) => state + lineLength + 1, 0)
}
/**
* Creates a {@link ContentEdits content edit} for the change of a checkbox at a given position.
*
* @param checkboxStartIndex The start index of the checkbox
* @param oldCheckbox The old checkbox that should be replaced
* @param newCheckboxState The new status of the checkbox
* @return the created {@link ContentEdits edit}
*/
const createCheckboxContentEdit = (
checkboxStartIndex: number,
oldCheckbox: string,
newCheckboxState: boolean
): ContentEdits => {
return [
{
from: checkboxStartIndex,
to: checkboxStartIndex + oldCheckbox.length,
insert: `[${newCheckboxState ? 'x' : ' '}]`
}
]
}

7
frontend/src/extensions/extra-integrations/vega-lite/vega-lite-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
import { AppExtension } from '../../base/app-extension'
import { VegaLiteMarkdownExtension } from './vega-lite-markdown-extension'
@ -14,4 +15,10 @@ export class VegaLiteAppExtension extends AppExtension {
buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
return [new VegaLiteMarkdownExtension()]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [
{ i18nKey: 'vegaLite', categoryI18nKey: 'charts', readMoreUrl: new URL('https://vega.github.io/vega-lite/') }
]
}
}

5
frontend/src/extensions/extra-integrations/vimeo/vimeo-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { Linter } from '../../../components/editor-page/editor-pane/linter/linter'
import { SingleLineRegexLinter } from '../../../components/editor-page/editor-pane/linter/single-line-regex-linter'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
@ -28,4 +29,8 @@ export class VimeoAppExtension extends AppExtension {
)
]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'vimeo', categoryI18nKey: 'embedding', readMoreUrl: new URL('https://vimeo.com/') }]
}
}

5
frontend/src/extensions/extra-integrations/youtube/youtube-app-extension.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
import type { Linter } from '../../../components/editor-page/editor-pane/linter/linter'
import { SingleLineRegexLinter } from '../../../components/editor-page/editor-pane/linter/single-line-regex-linter'
import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
@ -28,4 +29,8 @@ export class YoutubeAppExtension extends AppExtension {
)
]
}
buildCheatsheetExtensions(): CheatsheetExtension[] {
return [{ i18nKey: 'youtube', categoryI18nKey: 'embedding', readMoreUrl: new URL('https://youtube.com/') }]
}
}