From a2f01236e6df6974e8bf31315ac3b40bccb5135a Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Mon, 7 Nov 2022 16:52:11 +0500 Subject: [PATCH] fix(addon-editor): support write simple text after marked link (#3021) --- .../components/toolbar/toolbar.component.ts | 1 - .../default-editor-extensions.ts | 4 +- .../addon-editor/extensions/link/index.ts | 1 + projects/addon-editor/extensions/link/link.ts | 38 +++++++++++++++++++ .../extensions/link/ng-package.json | 8 ++++ .../desktop/addon-editor/editor-links.cy.ts | 2 + .../components/editor/examples/8/index.ts | 5 ++- 7 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 projects/addon-editor/extensions/link/index.ts create mode 100644 projects/addon-editor/extensions/link/link.ts create mode 100644 projects/addon-editor/extensions/link/ng-package.json diff --git a/projects/addon-editor/components/toolbar/toolbar.component.ts b/projects/addon-editor/components/toolbar/toolbar.component.ts index 7c1a8ad1a56d..1035ac7f4895 100644 --- a/projects/addon-editor/components/toolbar/toolbar.component.ts +++ b/projects/addon-editor/components/toolbar/toolbar.component.ts @@ -223,7 +223,6 @@ export class TuiToolbarComponent { if (url) { this.editor.toggleLink(url); - this.editor.selectClosest(); } } diff --git a/projects/addon-editor/extensions/default-editor-extensions/default-editor-extensions.ts b/projects/addon-editor/extensions/default-editor-extensions/default-editor-extensions.ts index 6de2175f2666..8e391a8e207a 100644 --- a/projects/addon-editor/extensions/default-editor-extensions/default-editor-extensions.ts +++ b/projects/addon-editor/extensions/default-editor-extensions/default-editor-extensions.ts @@ -15,9 +15,7 @@ export const defaultEditorExtensions = [ import(`@tiptap/extension-image`).then(({default: Image}) => Image.configure({inline: true}), ), - import(`@tiptap/extension-link`).then(({default: Link}) => - Link.configure({openOnClick: false}), - ), + import(`@taiga-ui/addon-editor/extensions/link`).then(({TuiLink}) => TuiLink), import(`@taiga-ui/addon-editor/extensions/jump-anchor`).then( ({TuiJumpAnchor}) => TuiJumpAnchor, ), diff --git a/projects/addon-editor/extensions/link/index.ts b/projects/addon-editor/extensions/link/index.ts new file mode 100644 index 000000000000..e33728e03e84 --- /dev/null +++ b/projects/addon-editor/extensions/link/index.ts @@ -0,0 +1 @@ +export * from './link'; diff --git a/projects/addon-editor/extensions/link/link.ts b/projects/addon-editor/extensions/link/link.ts new file mode 100644 index 000000000000..6b2db3d1c228 --- /dev/null +++ b/projects/addon-editor/extensions/link/link.ts @@ -0,0 +1,38 @@ +import {getHTMLFromFragment} from '@tiptap/core'; +import {Link} from '@tiptap/extension-link'; + +export const TuiLink = Link.extend({ + addCommands() { + return { + ...this.parent?.(), + toggleLink: + attributes => + ({chain, state}) => { + { + const {selection, doc} = state; + const selected = doc.cut(selection.to, selection.to + 1); + const sliced = getHTMLFromFragment( + selected.content, + state.schema, + ).replace(/<\/?[^>]+(>|$)/g, ``); + const forwardSymbolIsWhitespace = sliced === ` `; + + const toggleMark = chain().toggleMark(this.name, attributes, { + extendEmptyMarkRange: true, + }); + + return ( + forwardSymbolIsWhitespace + ? toggleMark.setTextSelection(selection.to + 1) + : toggleMark.setTextSelection(selection.to).insertContent( + // require: `@tiptap/extension-text-style` + ` `, + ) + ).run(); + } + }, + }; + }, +}).configure({ + openOnClick: false, +}); diff --git a/projects/addon-editor/extensions/link/ng-package.json b/projects/addon-editor/extensions/link/ng-package.json new file mode 100644 index 000000000000..bab5ebcdb74a --- /dev/null +++ b/projects/addon-editor/extensions/link/ng-package.json @@ -0,0 +1,8 @@ +{ + "lib": { + "entryFile": "index.ts", + "styleIncludePaths": [ + "../../../core/styles" + ] + } +} diff --git a/projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-links.cy.ts b/projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-links.cy.ts index c9a8e479eda8..8f9e06090eaa 100644 --- a/projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-links.cy.ts +++ b/projects/demo-integrations/cypress/tests/desktop/addon-editor/editor-links.cy.ts @@ -71,7 +71,9 @@ describe(`Editing links in Editor`, () => { tuiGetScreenshotArea().matchImageSnapshot(`3-1-before-remove-link`); + tuiOpenAnchorDropdown({containHref: `http://wysiwyg.com`}); tuiTrashValueByEditLink(); + tuiClearHint(); tuiGetScreenshotArea().matchImageSnapshot(`3-2-after-remove-link`); diff --git a/projects/demo/src/modules/components/editor/examples/8/index.ts b/projects/demo/src/modules/components/editor/examples/8/index.ts index 675c0f4e140a..fc0015e95611 100644 --- a/projects/demo/src/modules/components/editor/examples/8/index.ts +++ b/projects/demo/src/modules/components/editor/examples/8/index.ts @@ -19,8 +19,9 @@ import {TUI_EDITOR_EXTENSIONS, TuiEditorTool} from '@taiga-ui/addon-editor'; ({createImageEditorExtension}) => createImageEditorExtension(injector), ), - import(`@tiptap/extension-link`).then(({Link}) => - Link.configure({openOnClick: false}), + import(`@tiptap/extension-text-style`).then(({TextStyle}) => TextStyle), + import(`@taiga-ui/addon-editor/extensions/link`).then( + ({TuiLink}) => TuiLink, ), import(`@taiga-ui/addon-editor/extensions/jump-anchor`).then( ({TuiJumpAnchor}) => TuiJumpAnchor,