From fb475a1d7045ad029f8c91e3c94317945221c624 Mon Sep 17 00:00:00 2001 From: kreafox Date: Tue, 18 Aug 2020 11:39:30 +0300 Subject: [PATCH] WIP refactor link toolbar --- src/editor/plugins/Link/LinkEditor.jsx | 1 + src/editor/plugins/Link/extensions.js | 40 ++++++++-------- src/editor/plugins/Link/utils.js | 66 ++++++++++++++++++-------- 3 files changed, 67 insertions(+), 40 deletions(-) diff --git a/src/editor/plugins/Link/LinkEditor.jsx b/src/editor/plugins/Link/LinkEditor.jsx index 15cd26df..341501e0 100644 --- a/src/editor/plugins/Link/LinkEditor.jsx +++ b/src/editor/plugins/Link/LinkEditor.jsx @@ -51,6 +51,7 @@ export default (props) => { var url = formData?.link?.external_link; const data = {...formData}; if (url) { + console.log('data:', formData); insertLink(editor, url, data); } else { unwrapLink(editor); diff --git a/src/editor/plugins/Link/extensions.js b/src/editor/plugins/Link/extensions.js index 06e9b496..6967650f 100644 --- a/src/editor/plugins/Link/extensions.js +++ b/src/editor/plugins/Link/extensions.js @@ -1,30 +1,32 @@ import isUrl from 'is-url'; -import { wrapLink } from './utils'; +// import { wrapLink } from './utils'; import { LINK } from 'volto-slate/constants'; export const withLink = (editor) => { - const { insertData, insertText, isInline } = editor; + // const { insertData, insertText, isInline } = editor; + + const { isInline } = editor; editor.isInline = (element) => { return element.type === LINK ? true : isInline(element); }; - editor.insertText = (text) => { - if (text && isUrl(text)) { - wrapLink(editor, text); - } else { - insertText(text); - } - }; - - editor.insertData = (data) => { - const text = data.getData('text/plain'); - - if (text && isUrl(text)) { - wrapLink(editor, text); - } else { - insertData(data); - } - }; + // editor.insertText = (text) => { + // if (text && isUrl(text)) { + // wrapLink(editor, text); + // } else { + // insertText(text); + // } + // }; + // + // editor.insertData = (data) => { + // const text = data.getData('text/plain'); + // + // if (text && isUrl(text)) { + // wrapLink(editor, text); + // } else { + // insertData(data); + // } + // }; return editor; }; diff --git a/src/editor/plugins/Link/utils.js b/src/editor/plugins/Link/utils.js index 94d013cc..d07d3873 100644 --- a/src/editor/plugins/Link/utils.js +++ b/src/editor/plugins/Link/utils.js @@ -29,31 +29,55 @@ export const unwrapLink = (editor) => { }); }; -export const wrapLink = (editor, url, data) => { +export const insertLink = (editor, url, data) => { + if (isActiveLink(editor)) { unwrapLink(editor); } - const selection = editor.selection || editor.savedSelection; - const isCollapsed = selection && Range.isCollapsed(selection); - const link = { - type: LINK, - url, - children: isCollapsed ? [{ text: url }] : [], - data, - }; - - if (isCollapsed) { - Transforms.insertNodes(editor, link); - } else { - Transforms.wrapNodes(editor, link, { split: true }); - Transforms.collapse(editor, { edge: 'end' }); - } -}; + if (editor.savedSelection) { + // wrapLink(editor, url, data); -export const insertLink = (editor, url, data) => { - const selection = editor.selection || editor.savedSelection; - if (selection) { - wrapLink(editor, url, data); + const selection = editor.selection || editor.savedSelection; + const selPathRef = Editor.pathRef(editor, selection.anchor.path); + const isCollapsed = selection && Range.isCollapsed(selection); + + const link = { + type: LINK, + url, + children: isCollapsed ? [{ text: url }] : [], + data, + }; + + const res = Array.from( + Editor.nodes(editor, { + match: (n) => n.type === LINK, + mode: 'highest', + at: selection, + }), + ); + + if (res.length) { + const [, path] = res[0]; + Transforms.setNodes( + editor, + { data }, + { + at: path ? path : null, + match: path ? (n) => n.type === LINK : null, + }, + ); + } else { + Transforms.wrapNodes( + editor, + link, + { split: true, at: selection }, + ); + } + + if (data) { + Transforms.select(editor, selPathRef.current); + Transforms.collapse(editor, { edge: 'end' }); + } } };