From 436f789236b078fe01c5cd958d24e9cc0f5b5513 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=A2=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D0=BD=D1=86=D0=B5=D0=B2?= Date: Mon, 25 Mar 2024 16:31:23 +0100 Subject: [PATCH] feat!: added more functionality --- .eslintrc | 3 +- demo/HtmlPreview.tsx | 57 - demo/PMSelection.tsx | 46 +- demo/Playground.scss | 20 +- demo/Playground.stories.tsx | 30 +- demo/Playground.tsx | 423 ++-- demo/PlaygroundEditorInEditor.stories.tsx | 16 + demo/ProseMirrorDevTools.tsx | 40 +- demo/SplitModePreview.tsx | 70 + demo/cn.ts | 3 + .../EditorInEditorExtension/index.scss | 9 + .../EditorInEditorExtension/index.tsx | 106 + demo/editor-in-editor/index.tsx | 71 + demo/global.d.ts | 24 +- demo/keys.ts | 11 - demo/location.ts | 30 + demo/md-content.ts | 39 +- demo/md-plugins.ts | 18 +- package-lock.json | 1889 ++++++++++++++--- package.json | 38 + src/bundle/Editor.ts | 543 +++++ src/bundle/HorizontalDrag.tsx | 188 ++ src/bundle/MarkupEditorComponent.tsx | 51 + src/bundle/MarkupEditorView.scss | 141 ++ src/bundle/MarkupEditorView.tsx | 88 + src/bundle/SplitModeView.tsx | 120 ++ src/bundle/ToolbarView.tsx | 71 + src/bundle/WysiwygEditorComponent.tsx | 30 + src/bundle/WysiwygEditorView.scss | 32 + src/bundle/WysiwygEditorView.tsx | 72 + src/bundle/YfmEditor.tsx | 282 +++ src/bundle/YfmEditorView.scss | 68 + src/bundle/YfmEditorView.tsx | 280 +++ src/bundle/cm-config.ts | 75 + src/bundle/cm-upload/FilesUploadManager.ts | 46 + src/bundle/cm-upload/FilesUploadPresenter.ts | 214 ++ src/bundle/cm-upload/FilesUploadWidget.scss | 35 + src/bundle/cm-upload/FilesUploadWidget.tsx | 118 + src/bundle/cm-upload/const.ts | 1 + src/bundle/cm-upload/index.ts | 1 + src/bundle/cm-upload/utils.ts | 16 + .../config/action-names.ts | 9 + src/bundle/config/icons.ts | 134 ++ src/{toolbar => bundle}/config/index.ts | 0 src/bundle/config/markup.ts | 465 ++++ src/{toolbar => bundle}/config/wysiwyg.ts | 184 +- src/bundle/context.ts | 10 + src/bundle/emoji.ts | 267 +++ src/bundle/index.ts | 11 + .../settings/MarkdownHints/MarkdownHints.scss | 34 + .../settings/MarkdownHints/MarkdownHints.tsx | 45 + src/bundle/settings/MarkdownHints/index.ts | 1 + src/bundle/settings/index.scss | 65 + src/bundle/settings/index.tsx | 177 ++ src/bundle/sticky/index.ts | 37 + src/bundle/sticky/sticky.scss | 47 + .../toolbar/ToolbarButtonWithPopupMenu.scss | 27 + .../toolbar/ToolbarButtonWithPopupMenu.tsx | 121 ++ src/bundle/toolbar/ToolbarSelect.scss | 39 + src/bundle/toolbar/ToolbarSelect.tsx | 75 + src/bundle/toolbar/custom/ToolbarColors.scss | 9 + src/bundle/toolbar/custom/ToolbarColors.tsx | 61 + src/bundle/toolbar/custom/ToolbarFile.tsx | 103 + src/bundle/toolbar/custom/ToolbarImage.tsx | 103 + src/bundle/toolbar/custom/ToolbarLink.tsx | 99 + src/bundle/toolbar/custom/readme.md | 11 + src/bundle/toolbar/markup/MToolbarColors.tsx | 27 + src/bundle/toolbar/markup/MToolbarFile.tsx | 36 + src/bundle/toolbar/markup/MToolbarImage.tsx | 80 + src/bundle/toolbar/markup/MToolbarLink.tsx | 30 + src/bundle/toolbar/markup/context.ts | 16 + src/bundle/toolbar/wysiwyg/WToolbarColors.tsx | 31 + src/bundle/toolbar/wysiwyg/WToolbarLink.tsx | 32 + .../toolbar/wysiwyg/WToolbarTextSelect.tsx | 26 + src/bundle/useYfmEditor.ts | 67 + src/bundle/wysiwyg-preset.ts | 176 ++ src/core/markdown/MarkdownParser.ts | 20 +- src/core/types/parser.ts | 4 +- .../Autocomplete/Autocomplete.test.ts | 73 + .../behavior/Autocomplete/handler.ts | 98 + src/extensions/behavior/Autocomplete/index.ts | 70 + src/extensions/behavior/Autocomplete/types.ts | 16 + .../behavior/ClicksOnEdges/ClicksOnEdges.ts | 59 + .../behavior/ClicksOnEdges/commands.ts | 49 + .../behavior/ClicksOnEdges/index.ts | 1 + .../CodeBlockHighlight/CodeBlockHighlight.ts | 221 ++ .../behavior/CodeBlockHighlight/index.ts | 1 + .../TooltipPlugin/TooltipView.scss | 30 + .../CodeMirrorView/TooltipPlugin/index.tsx | 111 + .../CodeMirrorView/YCThemeWatcher/index.ts | 64 + .../CodeMirrorView/cm/CodeBlockView.scss | 8 + .../CodeMirrorView/cm/CodeBlockView.ts | 303 +++ .../behavior/CodeMirrorView/cm/codemodes.ts | 93 + .../behavior/CodeMirrorView/commands.ts | 19 + .../behavior/CodeMirrorView/const.ts | 1 + .../behavior/CodeMirrorView/index.ts | 53 + .../behavior/CommandMenu/component.scss | 59 + .../behavior/CommandMenu/component.tsx | 99 + src/extensions/behavior/CommandMenu/const.ts | 1 + .../behavior/CommandMenu/handler.ts | 270 +++ src/extensions/behavior/CommandMenu/index.ts | 51 + src/extensions/behavior/CommandMenu/types.ts | 5 + src/extensions/behavior/CommandMenu/utils.ts | 11 + .../behavior/EditorModeKeymap/index.ts | 45 + src/extensions/behavior/FilePaste/index.ts | 30 + .../ImgSizeAdditions/ImagePaste/index.ts | 89 + .../ImgSizeAdditions/ImagePaste/skeleton.scss | 11 + .../ImgSizeAdditions/ImagePaste/skeleton.tsx | 37 + .../ImgSizeAdditions/ImagePaste/upload.ts | 60 + .../ImgSizeAdditions/ImageWidget/actions.ts | 13 + .../ImgSizeAdditions/ImageWidget/index.ts | 31 + .../ImgSizeAdditions/ImageWidget/view.scss | 15 + .../ImgSizeAdditions/ImageWidget/view.tsx | 59 + .../ImgSizeAdditions/ImageWidget/widget.tsx | 176 ++ .../NodeView/ImageForm/ImageForm.scss | 14 + .../NodeView/ImageForm/ImageForm.tsx | 144 ++ .../NodeView/ImageForm/index.ts | 1 + .../NodeView/ImgNodeView.scss | 7 + .../NodeView/ImgSettingsButton.tsx | 96 + .../ImgSizeAdditions/NodeView/NodeView.tsx | 33 + .../behavior/ImgSizeAdditions/const.ts | 5 + .../behavior/ImgSizeAdditions/index.ts | 55 + .../behavior/ImgSizeAdditions/utils.ts | 53 + .../LinkEnhance/PlaceholderWidget/commands.ts | 13 + .../PlaceholderWidget/descriptor.tsx | 65 + .../LinkEnhance/PlaceholderWidget/widget.scss | 5 + .../LinkEnhance/PlaceholderWidget/widget.tsx | 36 + .../LinkEnhance/TooltipPlugin/TooltipView.tsx | 59 + .../LinkEnhance/TooltipPlugin/index.tsx | 285 +++ .../behavior/LinkEnhance/actions.ts | 54 + src/extensions/behavior/LinkEnhance/index.ts | 29 + src/extensions/behavior/Placeholder/index.ts | 12 +- .../behavior/SelectionContext/index.ts | 107 + .../behavior/SelectionContext/tooltip.tsx | 150 ++ .../TableCellContextPlugin/floating.scss | 13 + .../TableCellContextPlugin/floating.tsx | 61 + .../TableCellContextPlugin/index.ts | 42 + .../TableCellContextPlugin/view.tsx | 56 + .../TableContext/actions/cellAlign.ts | 56 + .../behavior/TableContext/actions/index.ts | 52 + src/extensions/behavior/TableContext/index.ts | 7 + .../ReactWidgetDescriptor.tsx | 38 + .../WidgetDecoration/WidgetDescriptor.ts | 61 + .../behavior/WidgetDecoration/actions.ts | 12 + .../behavior/WidgetDecoration/index.ts | 12 + .../behavior/WidgetDecoration/plugin.ts | 57 + .../behavior/WidgetDecoration/types.ts | 10 + .../YfmFileAdditions/YfmFilePaste/index.ts | 84 + .../YfmFilePaste/skeleton.scss | 9 + .../YfmFilePaste/skeleton.tsx | 34 + .../YfmFileAdditions/YfmFilePaste/upload.ts | 29 + .../YfmFileAdditions/YfmFileWidget/actions.ts | 14 + .../YfmFileAdditions/YfmFileWidget/index.ts | 22 + .../YfmFileAdditions/YfmFileWidget/view.scss | 9 + .../YfmFileAdditions/YfmFileWidget/view.tsx | 61 + .../YfmFileAdditions/YfmFileWidget/widget.tsx | 156 ++ .../behavior/YfmFileAdditions/index.ts | 23 + .../behavior/YfmFileAdditions/utils.ts | 12 + .../YfmNoteTooltip/TooltipPlugin/index.scss | 20 + .../YfmNoteTooltip/TooltipPlugin/index.tsx | 103 + .../behavior/YfmNoteTooltip/index.ts | 7 + .../YfmTableControls/actions.ts | 67 + .../YfmTableControls/buttons.tsx | 138 ++ .../YfmTableControls/index.ts | 10 + .../YfmTableControls/view.scss | 122 ++ .../YfmTableControls/view.tsx | 90 + .../YfmTableControls/yfmTableCellView.scss | 56 + .../YfmTableControls/yfmTableCellView.tsx | 277 +++ .../behavior/YfmTableAdditions/const.ts | 1 + .../behavior/YfmTableAdditions/index.ts | 7 + src/extensions/behavior/index.ts | 50 + src/extensions/behavior/utils/upload.ts | 65 + src/extensions/markdown/index.ts | 3 +- src/extensions/markdown/specs.ts | 3 +- src/extensions/yfm/Checkbox/index.scss | 2 +- src/extensions/yfm/Color/utils.ts | 2 +- src/extensions/yfm/Emoji/Emoji.ts | 15 + .../yfm/Emoji/EmojiInput/EmojiInput.ts | 50 + src/extensions/yfm/Emoji/EmojiInput/index.ts | 1 + .../yfm/Emoji/EmojiSpecs/EmojiSpecs.test.ts | 28 + .../yfm/Emoji/EmojiSpecs/EmojiSpecs.ts | 62 + src/extensions/yfm/Emoji/EmojiSpecs/const.ts | 16 + src/extensions/yfm/Emoji/EmojiSpecs/index.ts | 1 + .../yfm/Emoji/EmojiSuggest/EmojiHandler.ts | 256 +++ .../yfm/Emoji/EmojiSuggest/EmojiSuggest.ts | 53 + .../EmojiSuggest/EmojiSuggestComponent.scss | 68 + .../EmojiSuggest/EmojiSuggestComponent.tsx | 98 + .../yfm/Emoji/EmojiSuggest/const.ts | 1 + .../yfm/Emoji/EmojiSuggest/index.ts | 1 + .../yfm/Emoji/EmojiSuggest/types.ts | 7 + .../yfm/Emoji/EmojiSuggest/utils.ts | 11 + src/extensions/yfm/Emoji/index.ts | 1 + src/extensions/yfm/Mermaid/Mermaid.test.ts | 24 + .../yfm/Mermaid/MermaidNodeView/Mermaid.scss | 46 + .../Mermaid/MermaidNodeView/MermaidView.tsx | 199 ++ .../yfm/Mermaid/MermaidNodeView/NodeView.tsx | 113 + .../yfm/Mermaid/MermaidNodeView/index.ts | 1 + .../yfm/Mermaid/MermaidSpecs/const.ts | 18 + .../yfm/Mermaid/MermaidSpecs/index.tsx | 51 + src/extensions/yfm/Mermaid/actions.ts | 24 + src/extensions/yfm/Mermaid/const.ts | 2 + src/extensions/yfm/Mermaid/index.ts | 36 + .../yfm/YfmCut/plugins/auto-open.ts | 2 +- .../yfm/YfmDist/YfmDistSpecs/index.ts | 3 +- src/extensions/yfm/YfmTabs/plugins.ts | 2 +- src/extensions/yfm/YfmTabs/views.ts | 3 +- src/forms/FileForm.tsx | 131 ++ src/forms/ImageForm.scss | 14 + src/forms/ImageForm.tsx | 181 ++ src/forms/LinkForm.tsx | 85 + src/forms/TextInput.tsx | 45 + src/forms/UrlInputRow.scss | 7 + src/forms/UrlInputRow.tsx | 29 + src/forms/base/Form.scss | 7 + src/forms/base/Form.tsx | 15 + src/forms/base/FormFooter.scss | 5 + src/forms/base/FormFooter.tsx | 39 + src/forms/base/FormLayout.scss | 5 + src/forms/base/FormLayout.tsx | 15 + src/forms/base/FormRow.scss | 28 + src/forms/base/FormRow.tsx | 34 + src/forms/base/index.ts | 11 + src/forms/components/ButtonAttach.tsx | 30 + src/forms/components/NumberInput.tsx | 36 + src/forms/components/index.ts | 2 + src/forms/utils.ts | 9 + src/global.d.ts | 2 + src/i18n/bundle/en.json | 12 + src/i18n/bundle/index.ts | 8 + src/i18n/bundle/ru.json | 12 + src/i18n/codeblock/en.json | 4 + src/i18n/codeblock/index.ts | 8 + src/i18n/codeblock/ru.json | 4 + src/i18n/common/en.json | 4 +- src/i18n/common/ru.json | 4 +- src/i18n/forms/en.json | 33 + src/i18n/forms/index.ts | 8 + src/i18n/forms/ru.json | 33 + src/i18n/md-hints/en.json | 23 + src/i18n/md-hints/index.ts | 8 + src/i18n/md-hints/ru.json | 23 + src/i18n/menubar/en.json | 18 +- src/i18n/menubar/ru.json | 18 +- src/i18n/placeholder/en.json | 16 + src/i18n/placeholder/index.ts | 8 + src/i18n/placeholder/ru.json | 16 + src/i18n/suggest/en.json | 5 + src/i18n/suggest/index.ts | 8 + src/i18n/suggest/ru.json | 5 + src/i18n/widgets/en.json | 6 + src/i18n/widgets/index.ts | 8 + src/i18n/widgets/ru.json | 6 + src/i18n/yfm-block/en.json | 9 + src/i18n/yfm-block/index.ts | 8 + src/i18n/yfm-block/ru.json | 9 + src/i18n/yfm-layout/en.json | 15 + src/i18n/yfm-layout/index.ts | 8 + src/i18n/yfm-layout/ru.json | 15 + src/i18n/yfm-note/en.json | 7 + src/i18n/yfm-note/index.ts | 8 + src/i18n/yfm-note/ru.json | 7 + src/i18n/yfm-table/en.json | 9 + src/i18n/yfm-table/index.ts | 8 + src/i18n/yfm-table/ru.json | 9 + src/icons/Mermaid.tsx | 23 + src/icons/WysiwygMode.tsx | 30 + src/icons/index.ts | 161 +- src/index.ts | 3 +- src/lodash.ts | 29 + src/markdown-it/emoji.ts | 7 + src/markup/active.ts | 18 + src/markup/commands.ts | 261 +++ src/markup/editor.test.ts | 102 + src/markup/editor.ts | 121 ++ src/plugins/BaseTooltip/index.scss | 46 + src/plugins/BaseTooltip/index.tsx | 252 +++ src/react-utils/ErrorBoundary.tsx | 18 + src/react-utils/hooks.ts | 24 +- src/react-utils/index.ts | 7 + src/react-utils/toaster.ts | 16 + src/react-utils/useNodeEditing.ts | 28 + src/react-utils/useNodeHovered.ts | 20 + src/react-utils/useSticky.ts | 45 + src/shortcuts/formatter.ts | 3 +- src/styles/_zindex.scss | 6 + src/styles/markdown copy.scss | 2 + src/styles/markdown.scss | 3 + src/styles/styles.scss | 2 + src/styles/yc-colors.scss | 20 + src/styles/yc-file.scss | 5 + .../commands/removeCurrentColumn.ts | 2 +- src/toolbar/ToolbarButton.tsx | 2 +- src/toolbar/ToolbarListButton.tsx | 2 +- src/toolbar/index.ts | 2 +- src/utils/actions.ts | 4 + src/utils/autocomplete-popup.ts | 44 + src/utils/carousel/ArrayCarousel.test.ts | 71 + src/utils/carousel/ArrayCarousel.ts | 40 + src/utils/carousel/IndexCarousel.test.ts | 65 + src/utils/carousel/IndexCarousel.ts | 63 + src/utils/carousel/index.ts | 2 + src/utils/clipboard.ts | 25 + src/utils/ecapeRegexp.ts | 23 + src/utils/inputrules.ts | 2 +- src/utils/remove-node.ts | 11 + src/utils/sync-scroll.ts | 134 ++ src/utils/upload.ts | 53 + src/version.ts | 2 + src/view/components/YfmHtml/YfmHtml.tsx | 28 + src/view/components/YfmHtml/index.ts | 1 + src/view/hocs/withLatex/index.tsx | 33 + src/view/hocs/withLatex/types.ts | 5 + src/view/hocs/withLatex/useLatexRuntime.ts | 16 + src/view/hocs/withMermaid/index.tsx | 36 + src/view/hocs/withMermaid/types.ts | 5 + .../hocs/withMermaid/useMermaidRuntime.ts | 10 + src/view/hooks/useYfmShowElemWithId/index.ts | 1 + .../useYfmShowElemWithId.ts | 70 + src/view/readme.md | 1 + src/view/types/index.ts | 1 + 320 files changed, 17185 insertions(+), 756 deletions(-) delete mode 100644 demo/HtmlPreview.tsx create mode 100644 demo/PlaygroundEditorInEditor.stories.tsx create mode 100644 demo/SplitModePreview.tsx create mode 100644 demo/cn.ts create mode 100644 demo/editor-in-editor/EditorInEditorExtension/index.scss create mode 100644 demo/editor-in-editor/EditorInEditorExtension/index.tsx create mode 100644 demo/editor-in-editor/index.tsx delete mode 100644 demo/keys.ts create mode 100644 demo/location.ts create mode 100644 src/bundle/Editor.ts create mode 100644 src/bundle/HorizontalDrag.tsx create mode 100644 src/bundle/MarkupEditorComponent.tsx create mode 100644 src/bundle/MarkupEditorView.scss create mode 100644 src/bundle/MarkupEditorView.tsx create mode 100644 src/bundle/SplitModeView.tsx create mode 100644 src/bundle/ToolbarView.tsx create mode 100644 src/bundle/WysiwygEditorComponent.tsx create mode 100644 src/bundle/WysiwygEditorView.scss create mode 100644 src/bundle/WysiwygEditorView.tsx create mode 100644 src/bundle/YfmEditor.tsx create mode 100644 src/bundle/YfmEditorView.scss create mode 100644 src/bundle/YfmEditorView.tsx create mode 100644 src/bundle/cm-config.ts create mode 100644 src/bundle/cm-upload/FilesUploadManager.ts create mode 100644 src/bundle/cm-upload/FilesUploadPresenter.ts create mode 100644 src/bundle/cm-upload/FilesUploadWidget.scss create mode 100644 src/bundle/cm-upload/FilesUploadWidget.tsx create mode 100644 src/bundle/cm-upload/const.ts create mode 100644 src/bundle/cm-upload/index.ts create mode 100644 src/bundle/cm-upload/utils.ts rename src/{toolbar => bundle}/config/action-names.ts (86%) create mode 100644 src/bundle/config/icons.ts rename src/{toolbar => bundle}/config/index.ts (100%) create mode 100644 src/bundle/config/markup.ts rename src/{toolbar => bundle}/config/wysiwyg.ts (70%) create mode 100644 src/bundle/context.ts create mode 100644 src/bundle/emoji.ts create mode 100644 src/bundle/index.ts create mode 100644 src/bundle/settings/MarkdownHints/MarkdownHints.scss create mode 100644 src/bundle/settings/MarkdownHints/MarkdownHints.tsx create mode 100644 src/bundle/settings/MarkdownHints/index.ts create mode 100644 src/bundle/settings/index.scss create mode 100644 src/bundle/settings/index.tsx create mode 100644 src/bundle/sticky/index.ts create mode 100644 src/bundle/sticky/sticky.scss create mode 100644 src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss create mode 100644 src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx create mode 100644 src/bundle/toolbar/ToolbarSelect.scss create mode 100644 src/bundle/toolbar/ToolbarSelect.tsx create mode 100644 src/bundle/toolbar/custom/ToolbarColors.scss create mode 100644 src/bundle/toolbar/custom/ToolbarColors.tsx create mode 100644 src/bundle/toolbar/custom/ToolbarFile.tsx create mode 100644 src/bundle/toolbar/custom/ToolbarImage.tsx create mode 100644 src/bundle/toolbar/custom/ToolbarLink.tsx create mode 100644 src/bundle/toolbar/custom/readme.md create mode 100644 src/bundle/toolbar/markup/MToolbarColors.tsx create mode 100644 src/bundle/toolbar/markup/MToolbarFile.tsx create mode 100644 src/bundle/toolbar/markup/MToolbarImage.tsx create mode 100644 src/bundle/toolbar/markup/MToolbarLink.tsx create mode 100644 src/bundle/toolbar/markup/context.ts create mode 100644 src/bundle/toolbar/wysiwyg/WToolbarColors.tsx create mode 100644 src/bundle/toolbar/wysiwyg/WToolbarLink.tsx create mode 100644 src/bundle/toolbar/wysiwyg/WToolbarTextSelect.tsx create mode 100644 src/bundle/useYfmEditor.ts create mode 100644 src/bundle/wysiwyg-preset.ts create mode 100644 src/extensions/behavior/Autocomplete/Autocomplete.test.ts create mode 100644 src/extensions/behavior/Autocomplete/handler.ts create mode 100644 src/extensions/behavior/Autocomplete/index.ts create mode 100644 src/extensions/behavior/Autocomplete/types.ts create mode 100644 src/extensions/behavior/ClicksOnEdges/ClicksOnEdges.ts create mode 100644 src/extensions/behavior/ClicksOnEdges/commands.ts create mode 100644 src/extensions/behavior/ClicksOnEdges/index.ts create mode 100644 src/extensions/behavior/CodeBlockHighlight/CodeBlockHighlight.ts create mode 100644 src/extensions/behavior/CodeBlockHighlight/index.ts create mode 100644 src/extensions/behavior/CodeMirrorView/TooltipPlugin/TooltipView.scss create mode 100644 src/extensions/behavior/CodeMirrorView/TooltipPlugin/index.tsx create mode 100644 src/extensions/behavior/CodeMirrorView/YCThemeWatcher/index.ts create mode 100644 src/extensions/behavior/CodeMirrorView/cm/CodeBlockView.scss create mode 100644 src/extensions/behavior/CodeMirrorView/cm/CodeBlockView.ts create mode 100644 src/extensions/behavior/CodeMirrorView/cm/codemodes.ts create mode 100644 src/extensions/behavior/CodeMirrorView/commands.ts create mode 100644 src/extensions/behavior/CodeMirrorView/const.ts create mode 100644 src/extensions/behavior/CodeMirrorView/index.ts create mode 100644 src/extensions/behavior/CommandMenu/component.scss create mode 100644 src/extensions/behavior/CommandMenu/component.tsx create mode 100644 src/extensions/behavior/CommandMenu/const.ts create mode 100644 src/extensions/behavior/CommandMenu/handler.ts create mode 100644 src/extensions/behavior/CommandMenu/index.ts create mode 100644 src/extensions/behavior/CommandMenu/types.ts create mode 100644 src/extensions/behavior/CommandMenu/utils.ts create mode 100644 src/extensions/behavior/EditorModeKeymap/index.ts create mode 100644 src/extensions/behavior/FilePaste/index.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImagePaste/index.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImagePaste/skeleton.scss create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImagePaste/skeleton.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImagePaste/upload.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImageWidget/actions.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImageWidget/index.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImageWidget/view.scss create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImageWidget/view.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/ImageWidget/widget.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/ImageForm/ImageForm.scss create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/ImageForm/ImageForm.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/ImageForm/index.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/ImgNodeView.scss create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/ImgSettingsButton.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/NodeView/NodeView.tsx create mode 100644 src/extensions/behavior/ImgSizeAdditions/const.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/index.ts create mode 100644 src/extensions/behavior/ImgSizeAdditions/utils.ts create mode 100644 src/extensions/behavior/LinkEnhance/PlaceholderWidget/commands.ts create mode 100644 src/extensions/behavior/LinkEnhance/PlaceholderWidget/descriptor.tsx create mode 100644 src/extensions/behavior/LinkEnhance/PlaceholderWidget/widget.scss create mode 100644 src/extensions/behavior/LinkEnhance/PlaceholderWidget/widget.tsx create mode 100644 src/extensions/behavior/LinkEnhance/TooltipPlugin/TooltipView.tsx create mode 100644 src/extensions/behavior/LinkEnhance/TooltipPlugin/index.tsx create mode 100644 src/extensions/behavior/LinkEnhance/actions.ts create mode 100644 src/extensions/behavior/LinkEnhance/index.ts create mode 100644 src/extensions/behavior/SelectionContext/index.ts create mode 100644 src/extensions/behavior/SelectionContext/tooltip.tsx create mode 100644 src/extensions/behavior/TableContext/TableCellContextPlugin/floating.scss create mode 100644 src/extensions/behavior/TableContext/TableCellContextPlugin/floating.tsx create mode 100644 src/extensions/behavior/TableContext/TableCellContextPlugin/index.ts create mode 100644 src/extensions/behavior/TableContext/TableCellContextPlugin/view.tsx create mode 100644 src/extensions/behavior/TableContext/actions/cellAlign.ts create mode 100644 src/extensions/behavior/TableContext/actions/index.ts create mode 100644 src/extensions/behavior/TableContext/index.ts create mode 100644 src/extensions/behavior/WidgetDecoration/ReactWidgetDescriptor.tsx create mode 100644 src/extensions/behavior/WidgetDecoration/WidgetDescriptor.ts create mode 100644 src/extensions/behavior/WidgetDecoration/actions.ts create mode 100644 src/extensions/behavior/WidgetDecoration/index.ts create mode 100644 src/extensions/behavior/WidgetDecoration/plugin.ts create mode 100644 src/extensions/behavior/WidgetDecoration/types.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFilePaste/index.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFilePaste/skeleton.scss create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFilePaste/skeleton.tsx create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFilePaste/upload.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFileWidget/actions.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFileWidget/index.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFileWidget/view.scss create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFileWidget/view.tsx create mode 100644 src/extensions/behavior/YfmFileAdditions/YfmFileWidget/widget.tsx create mode 100644 src/extensions/behavior/YfmFileAdditions/index.ts create mode 100644 src/extensions/behavior/YfmFileAdditions/utils.ts create mode 100644 src/extensions/behavior/YfmNoteTooltip/TooltipPlugin/index.scss create mode 100644 src/extensions/behavior/YfmNoteTooltip/TooltipPlugin/index.tsx create mode 100644 src/extensions/behavior/YfmNoteTooltip/index.ts create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/actions.ts create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/buttons.tsx create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/index.ts create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/view.scss create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/view.tsx create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/yfmTableCellView.scss create mode 100644 src/extensions/behavior/YfmTableAdditions/YfmTableControls/yfmTableCellView.tsx create mode 100644 src/extensions/behavior/YfmTableAdditions/const.ts create mode 100644 src/extensions/behavior/YfmTableAdditions/index.ts create mode 100644 src/extensions/behavior/utils/upload.ts create mode 100644 src/extensions/yfm/Emoji/Emoji.ts create mode 100644 src/extensions/yfm/Emoji/EmojiInput/EmojiInput.ts create mode 100644 src/extensions/yfm/Emoji/EmojiInput/index.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSpecs/EmojiSpecs.test.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSpecs/EmojiSpecs.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSpecs/const.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSpecs/index.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/EmojiHandler.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggest.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.scss create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.tsx create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/const.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/index.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/types.ts create mode 100644 src/extensions/yfm/Emoji/EmojiSuggest/utils.ts create mode 100644 src/extensions/yfm/Emoji/index.ts create mode 100644 src/extensions/yfm/Mermaid/Mermaid.test.ts create mode 100644 src/extensions/yfm/Mermaid/MermaidNodeView/Mermaid.scss create mode 100644 src/extensions/yfm/Mermaid/MermaidNodeView/MermaidView.tsx create mode 100644 src/extensions/yfm/Mermaid/MermaidNodeView/NodeView.tsx create mode 100644 src/extensions/yfm/Mermaid/MermaidNodeView/index.ts create mode 100644 src/extensions/yfm/Mermaid/MermaidSpecs/const.ts create mode 100644 src/extensions/yfm/Mermaid/MermaidSpecs/index.tsx create mode 100644 src/extensions/yfm/Mermaid/actions.ts create mode 100644 src/extensions/yfm/Mermaid/const.ts create mode 100644 src/extensions/yfm/Mermaid/index.ts create mode 100644 src/forms/FileForm.tsx create mode 100644 src/forms/ImageForm.scss create mode 100644 src/forms/ImageForm.tsx create mode 100644 src/forms/LinkForm.tsx create mode 100644 src/forms/TextInput.tsx create mode 100644 src/forms/UrlInputRow.scss create mode 100644 src/forms/UrlInputRow.tsx create mode 100644 src/forms/base/Form.scss create mode 100644 src/forms/base/Form.tsx create mode 100644 src/forms/base/FormFooter.scss create mode 100644 src/forms/base/FormFooter.tsx create mode 100644 src/forms/base/FormLayout.scss create mode 100644 src/forms/base/FormLayout.tsx create mode 100644 src/forms/base/FormRow.scss create mode 100644 src/forms/base/FormRow.tsx create mode 100644 src/forms/base/index.ts create mode 100644 src/forms/components/ButtonAttach.tsx create mode 100644 src/forms/components/NumberInput.tsx create mode 100644 src/forms/components/index.ts create mode 100644 src/forms/utils.ts create mode 100644 src/i18n/bundle/en.json create mode 100644 src/i18n/bundle/index.ts create mode 100644 src/i18n/bundle/ru.json create mode 100644 src/i18n/codeblock/en.json create mode 100644 src/i18n/codeblock/index.ts create mode 100644 src/i18n/codeblock/ru.json create mode 100644 src/i18n/forms/en.json create mode 100644 src/i18n/forms/index.ts create mode 100644 src/i18n/forms/ru.json create mode 100644 src/i18n/md-hints/en.json create mode 100644 src/i18n/md-hints/index.ts create mode 100644 src/i18n/md-hints/ru.json create mode 100644 src/i18n/placeholder/en.json create mode 100644 src/i18n/placeholder/index.ts create mode 100644 src/i18n/placeholder/ru.json create mode 100644 src/i18n/suggest/en.json create mode 100644 src/i18n/suggest/index.ts create mode 100644 src/i18n/suggest/ru.json create mode 100644 src/i18n/widgets/en.json create mode 100644 src/i18n/widgets/index.ts create mode 100644 src/i18n/widgets/ru.json create mode 100644 src/i18n/yfm-block/en.json create mode 100644 src/i18n/yfm-block/index.ts create mode 100644 src/i18n/yfm-block/ru.json create mode 100644 src/i18n/yfm-layout/en.json create mode 100644 src/i18n/yfm-layout/index.ts create mode 100644 src/i18n/yfm-layout/ru.json create mode 100644 src/i18n/yfm-note/en.json create mode 100644 src/i18n/yfm-note/index.ts create mode 100644 src/i18n/yfm-note/ru.json create mode 100644 src/i18n/yfm-table/en.json create mode 100644 src/i18n/yfm-table/index.ts create mode 100644 src/i18n/yfm-table/ru.json create mode 100644 src/icons/Mermaid.tsx create mode 100644 src/icons/WysiwygMode.tsx create mode 100644 src/lodash.ts create mode 100644 src/markdown-it/emoji.ts create mode 100644 src/markup/active.ts create mode 100644 src/markup/commands.ts create mode 100644 src/markup/editor.test.ts create mode 100644 src/markup/editor.ts create mode 100644 src/plugins/BaseTooltip/index.scss create mode 100644 src/plugins/BaseTooltip/index.tsx create mode 100644 src/react-utils/ErrorBoundary.tsx create mode 100644 src/react-utils/index.ts create mode 100644 src/react-utils/toaster.ts create mode 100644 src/react-utils/useNodeEditing.ts create mode 100644 src/react-utils/useNodeHovered.ts create mode 100644 src/react-utils/useSticky.ts create mode 100644 src/styles/_zindex.scss create mode 100644 src/styles/markdown copy.scss create mode 100644 src/styles/styles.scss create mode 100644 src/styles/yc-colors.scss create mode 100644 src/styles/yc-file.scss create mode 100644 src/utils/autocomplete-popup.ts create mode 100644 src/utils/carousel/ArrayCarousel.test.ts create mode 100644 src/utils/carousel/ArrayCarousel.ts create mode 100644 src/utils/carousel/IndexCarousel.test.ts create mode 100644 src/utils/carousel/IndexCarousel.ts create mode 100644 src/utils/carousel/index.ts create mode 100644 src/utils/clipboard.ts create mode 100644 src/utils/ecapeRegexp.ts create mode 100644 src/utils/remove-node.ts create mode 100644 src/utils/sync-scroll.ts create mode 100644 src/utils/upload.ts create mode 100644 src/version.ts create mode 100644 src/view/components/YfmHtml/YfmHtml.tsx create mode 100644 src/view/components/YfmHtml/index.ts create mode 100644 src/view/hocs/withLatex/index.tsx create mode 100644 src/view/hocs/withLatex/types.ts create mode 100644 src/view/hocs/withLatex/useLatexRuntime.ts create mode 100644 src/view/hocs/withMermaid/index.tsx create mode 100644 src/view/hocs/withMermaid/types.ts create mode 100644 src/view/hocs/withMermaid/useMermaidRuntime.ts create mode 100644 src/view/hooks/useYfmShowElemWithId/index.ts create mode 100644 src/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.ts create mode 100644 src/view/readme.md create mode 100644 src/view/types/index.ts diff --git a/.eslintrc b/.eslintrc index 9b117219..ca27ed0f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,6 +8,7 @@ ], "plugins": ["lodash"], "rules": { - "lodash/import-scope": [2, "method"] + "lodash/import-scope": [2, "method"], + "jsx-a11y/no-autofocus": "warn" } } diff --git a/demo/HtmlPreview.tsx b/demo/HtmlPreview.tsx deleted file mode 100644 index 385938ac..00000000 --- a/demo/HtmlPreview.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import {useLatex} from '@diplodoc/latex-extension/react'; -import transform from '@diplodoc/transform'; - -import {MarkupString, colorClassName} from '../src'; -import type {ClassNameProps} from '../src/classname'; - -import {LATEX_RUNTIME, plugins} from './md-plugins'; - -type PlaygroundHtmlPreviewProps = ClassNameProps & { - value: MarkupString; - allowHTML?: boolean; - breaks?: boolean; - linkify?: boolean; - linkifyTlds?: string | string[]; -}; - -type Meta = {script?: string[]; style?: string[]}; - -export const PlaygroundHtmlPreview: React.FC = - function PlaygroundHtmlPreview({value, allowHTML, breaks, linkify, linkifyTlds, className}) { - const divRef = React.useRef(null); - const renderLatex = useLatex(); - - const result = React.useMemo(() => { - return transform(value, { - allowHTML, - breaks, - plugins, - linkify, - linkifyTlds, - defaultClassName: colorClassName, // markdown-it-color - }).result; - }, [allowHTML, breaks, linkify, linkifyTlds, value]); - - // Load katex only if one or more formulas should be rendered - if (((result.meta ?? {}) as Meta).script?.includes(LATEX_RUNTIME)) { - import('@diplodoc/latex-extension/runtime'); - } - if (((result.meta ?? {}) as Meta).style?.includes(LATEX_RUNTIME)) { - // @ts-expect-error - import('@diplodoc/latex-extension/runtime/styles'); - } - - React.useEffect(() => { - renderLatex({throwOnError: false}); - }, [result.html, renderLatex]); - - return ( -
- ); - }; diff --git a/demo/PMSelection.tsx b/demo/PMSelection.tsx index ea3abc96..90699939 100644 --- a/demo/PMSelection.tsx +++ b/demo/PMSelection.tsx @@ -1,14 +1,52 @@ import React from 'react'; -import type {EditorView} from 'prosemirror-view'; +import {EditorView} from 'prosemirror-view'; +import {useEffectOnce, useUpdate} from 'react-use'; -import {ClassNameProps, isNodeSelection, isTextSelection, isWholeSelection} from '../src'; +import {type ClassNameProps, isNodeSelection, isTextSelection, isWholeSelection} from '../src'; +import type {Editor} from '../src/bundle'; -export type PMSelectionProps = ClassNameProps & { +export type WysiwygSelectionProps = ClassNameProps & { + editorRef: React.RefObject; +}; + +export function WysiwygSelection({editorRef, className}: WysiwygSelectionProps) { + const rerender = useUpdate(); + useEffectOnce(() => { + rerender(); + }); + + const editor = editorRef.current; + const view = editor?.currentType === 'wysiwyg' && editor._wysiwygView; + + React.useLayoutEffect(() => { + if (!editor) return undefined; + editor.on( + // @ts-expect-error TODO: add public event for selection change + 'rerender-toolbar', + rerender, + ); + editor.on('change-editor-type', rerender); + return () => { + editor.off( + // @ts-expect-error TODO: add public event for selection change + 'rerender-toolbar', + rerender, + ); + editor.off('change-editor-type', rerender); + }; + }, [editor, rerender]); + + if (!view) return null; + + return ; +} + +type PMSelectionProps = ClassNameProps & { view: EditorView; }; -export function PMSelection({view, className}: PMSelectionProps) { +function PMSelection({view, className}: PMSelectionProps) { const sel = view.state.selection; const renderFromTo = () => ( <> diff --git a/demo/Playground.scss b/demo/Playground.scss index e4474c1e..e24193f3 100644 --- a/demo/Playground.scss +++ b/demo/Playground.scss @@ -15,30 +15,26 @@ @include text-header-2(); } - &__preview-type { + &__version { position: absolute; right: 0; bottom: 0; - } - - &__controls { - display: flex; - align-items: center; - column-gap: 8px; - & > p { - margin: 0; - } + @include text-code-inline-1(); } &__markup { + overflow-y: auto; + + margin: 0; + padding: 5px 10px; + background-color: var(--g-color-base-generic); } &__editor-view { - min-height: 100px; + min-height: 150px; margin: 20px 0; - padding-left: 4px; } &__pm-selection { diff --git a/demo/Playground.stories.tsx b/demo/Playground.stories.tsx index 3392a462..becc665e 100644 --- a/demo/Playground.stories.tsx +++ b/demo/Playground.stories.tsx @@ -1,25 +1,49 @@ import React from 'react'; -import type {ComponentMeta, Story} from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +// eslint-disable-next-line import/no-extraneous-dependencies +import type {ComponentMeta, Story} from '@storybook/react'; import {Playground as PlaygroundComponent, PlaygroundProps} from './Playground'; +import {parseLocation} from './location'; import {initialMdContent} from './md-content'; export default { title: 'YFM Editor', + component: PlaygroundComponent, } as ComponentMeta; type PlaygroundStoryProps = Pick< PlaygroundProps, - 'breaks' | 'allowHTML' | 'linkify' | 'linkifyTlds' + | 'initialEditor' + | 'settingsVisible' + | 'breaks' + | 'allowHTML' + | 'linkify' + | 'linkifyTlds' + | 'sanitizeHtml' + | 'prepareRawMarkup' + | 'splitModeOrientation' + | 'stickyToolbar' + | 'initialSplitModeEnabled' + | 'renderPreviewDefined' + | 'height' >; export const Playground: Story = (props) => ( - + ); Playground.args = { + initialEditor: 'wysiwyg', + settingsVisible: true, allowHTML: true, breaks: true, linkify: true, linkifyTlds: [], + sanitizeHtml: false, + prepareRawMarkup: false, + splitModeOrientation: 'horizontal', + stickyToolbar: true, + initialSplitModeEnabled: false, + renderPreviewDefined: true, + height: 'initial', }; diff --git a/demo/Playground.tsx b/demo/Playground.tsx index 0e1f077e..9a471351 100644 --- a/demo/Playground.tsx +++ b/demo/Playground.tsx @@ -1,247 +1,272 @@ -import React from 'react'; +import React, {CSSProperties, useCallback} from 'react'; -import {Button, RadioButton, TextArea} from '@gravity-ui/uikit'; -import block from 'bem-cn-lite'; // eslint-disable-line import/no-extraneous-dependencies -import {useUpdate} from 'react-use'; +import {Button, DropdownMenu} from '@gravity-ui/uikit'; +import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18'; +import {MarkupString, logger} from '../src'; import { - BaseNode, - BasePreset, - BehaviorPreset, - Extension, - FlexToolbar, - MarkdownBlocksPreset, - MarkdownMarksPreset, - MarkupString, - ReactRenderStorage, - ReactRendererComponent, - YfmEditorComponent, - YfmPreset, - logger, - useYfmEditor, -} from '../src'; + YfmEditor, + YfmEditorProps, + YfmEditorRef, + YfmEditorType, + markupToolbarConfigs, + wysiwygToolbarConfigs, +} from '../src/bundle'; +import {RenderPreview} from '../src/bundle/Editor'; import {Math} from '../src/extensions/yfm/Math'; -import {wHiddenData, wToolbarConfig} from '../src/toolbar/config/wysiwyg'; +import {Mermaid} from '../src/extensions/yfm/Mermaid'; +import {cloneDeep} from '../src/lodash'; +import type {FileUploadHandler} from '../src/utils/upload'; +import {VERSION} from '../src/version'; -import {PlaygroundHtmlPreview} from './HtmlPreview'; -import {PMSelection} from './PMSelection'; -import {ProseMirrorDevTools} from './ProseMirrorDevTools'; -import {keys} from './keys'; +import {WysiwygSelection} from './PMSelection'; +import {WysiwygDevTools} from './ProseMirrorDevTools'; +import {SplitModePreview} from './SplitModePreview'; +import {block} from './cn'; +import {randomDelay} from './delay'; +import {debouncedUpdateLocation as updateLocation} from './location'; +import {plugins} from './md-plugins'; import './Playground.scss'; const b = block('playground'); +const onAction: YfmEditorProps['onMenuBarAction'] = ({action, editorType}) => { + console.info(`The '${action}' action is performed in the ${editorType}-editor.`); +}; + +const mToolbarConfig = [ + ...markupToolbarConfigs.mToolbarConfig, + [markupToolbarConfigs.mMermaidButton], +]; +mToolbarConfig[2].push(markupToolbarConfigs.mMathListItem); + +const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig); +wToolbarConfig[2].push(wysiwygToolbarConfigs.wMathListItem); + +const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat( + wysiwygToolbarConfigs.wMathInlineItemData, + wysiwygToolbarConfigs.wMathBlockItemData, + wysiwygToolbarConfigs.wMermaidItemData, +); export type PlaygroundProps = { initial?: MarkupString; allowHTML?: boolean; + settingsVisible?: boolean; + initialEditor?: YfmEditorType; breaks?: boolean; linkify?: boolean; linkifyTlds?: string | string[]; + sanitizeHtml?: boolean; + prepareRawMarkup?: boolean; + splitModeOrientation?: 'horizontal' | 'vertical' | false; + stickyToolbar?: boolean; + initialSplitModeEnabled?: boolean; + renderPreviewDefined?: boolean; + height?: CSSProperties['height']; }; -const enum PreviewType { - Markup = 'markup', - Html = 'html', -} - logger.setLogger({ metrics: console.info, - action: console.info, + action: (data) => console.info(`Action: ${data.action}`, data), ...console, }); -const Playground = React.memo((props) => { - const {initial, allowHTML, breaks, linkify, linkifyTlds} = props; - const [previewType, setPreviewType] = React.useState(PreviewType.Markup); - const [yfmRaw, setYfmRaw] = React.useState(initial || ''); - const rerender = useUpdate(); - - const renderStorage = React.useMemo(() => new ReactRenderStorage(), []); - const extensions = React.useMemo( - () => (builder) => - builder - .use(BasePreset, { - baseSchema: { - paragraphPlaceholder(_node, parent) { - return parent?.type.name === BaseNode.Doc && parent.childCount === 1 - ? 'Now... start typing' - : null; - }, - }, - }) - .use(BehaviorPreset, { - history: { - undoKey: keys.undo, - redoKey: keys.redo, - }, - reactRenderer: renderStorage, - }) - .use(MarkdownBlocksPreset, { - image: false, - heading: false, - lists: { - ulKey: keys.ulist, - olKey: keys.olist, - }, - breaks: {preferredBreak: breaks ? 'soft' : 'hard'}, - }) - .use(MarkdownMarksPreset, { - bold: {boldKey: keys.bold}, - italic: {italicKey: keys.italic}, - strike: {strikeKey: keys.strike}, - underline: {underlineKey: keys.underline}, - code: {codeKey: keys.code}, - }) - .use(YfmPreset, {}) - .use(Math, { - loadRuntimeScript: async () => { - await Promise.all([ - import('@diplodoc/latex-extension/runtime'), // @ts-expect-error - import('@diplodoc/latex-extension/runtime/styles'), - ]); - }, - }), - [breaks, renderStorage], - ); - - const editor = useYfmEditor({ +export const Playground = React.memo((props) => { + const { + initial, + initialEditor, + initialSplitModeEnabled, + settingsVisible, + allowHTML, + breaks, linkify, linkifyTlds, - allowHTML, - extensions, - initialContent: yfmRaw, - onChange: () => rerender(), - onDocChange: (e) => setYfmRaw(e.getValue()), - }); + sanitizeHtml, + prepareRawMarkup, + splitModeOrientation, + stickyToolbar, + renderPreviewDefined, + height, + } = props; + const [editorType, setEditorType] = React.useState(initialEditor ?? 'wysiwyg'); + const [yfmRaw, setYfmRaw] = React.useState(initial || ''); + const editorRef = React.useRef(null); + + React.useEffect(() => { + updateLocation(yfmRaw); + }, [yfmRaw]); + + React.useEffect(() => { + console.log('[Playground] YfmEditor domElem:', editorRef.current?.domElem()); + }, []); + + const renderPreview = useCallback( + ({getValue}) => ( + + ), + [allowHTML, breaks, linkify, linkifyTlds, sanitizeHtml], + ); return (
YFM Editor Playground - - - Markup - HTML - - + {VERSION}
-
-

isEmpty: {String(editor.isEmpty())}

- + } + > + { + editorRef.current?.clear(); + editorRef.current?.focus(); }} - > - Clear - - - - - - -
-
-
- editor.focus()} - data={wToolbarConfig} - hiddenActions={wHiddenData} /> - - - - - -
+ { + editorRef.current?.moveCursor({line: 115}); + editorRef.current?.focus(); + }} + /> + +
+ +
+ setYfmRaw(e.getValue())} + onEditorTypeChange={setEditorType} + onMenuBarAction={onAction} + onFileUpload={fileUploadHandler} + settingsVisible={settingsVisible} + onSplitModeEnabledChange={(splitModeEnabled) => { + console.log(`Split mode enabled: ${splitModeEnabled}`); + }} + onMenuVisibleChange={(isMenuVisible) => { + console.log('Menubar visible: ' + isMenuVisible); + }} + prepareRawMarkup={ + prepareRawMarkup + ? (value) => '**prepare raw markup**\n\n' + value + : undefined + } + onCancel={() => { + alert('Editor: cancel'); + return true; + }} + onSubmit={() => { + alert('Editor: submit'); + return true; + }} + extensionOptions={{ + commandMenu: {actions: wCommandMenuConfig}, + }} + wysiwygExtraExtensions={(builder) => + builder + .use(Math, { + loadRuntimeScript: () => { + import( + /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime' + ); + import( + // @ts-expect-error // no types for styles + /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles' + ); + }, + }) + .use(Mermaid, { + loadRuntimeScript: () => { + import( + /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime' + ); + }, + }) + } + /> + + +
+
- {previewType === PreviewType.Markup && ( -