X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ef40444196e6b3e291a402aa18ddcfca7b35511..c8cfec96dc11a3adaed7f7c3545ca35faa5deab3:/resources/js/wysiwyg/ui/defaults/forms/objects.ts diff --git a/resources/js/wysiwyg/ui/defaults/forms/objects.ts b/resources/js/wysiwyg/ui/defaults/forms/objects.ts index 6bd265e6c..cdf464cb4 100644 --- a/resources/js/wysiwyg/ui/defaults/forms/objects.ts +++ b/resources/js/wysiwyg/ui/defaults/forms/objects.ts @@ -5,12 +5,11 @@ import { EditorSelectFormFieldDefinition } from "../../framework/forms"; import {EditorUiContext} from "../../framework/core"; -import {$createTextNode, $getSelection, $insertNodes} from "lexical"; -import {$isImageNode, ImageNode} from "../../../nodes/image"; -import {$createLinkNode, $isLinkNode} from "@lexical/link"; -import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media"; -import {$insertNodeToNearestRoot} from "@lexical/utils"; -import {$getNodeFromSelection} from "../../../utils/selection"; +import {$createNodeSelection, $getSelection, $insertNodes, $setSelection} from "lexical"; +import {$isImageNode, ImageNode} from "@lexical/rich-text/LexicalImageNode"; +import {LinkNode} from "@lexical/link"; +import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "@lexical/rich-text/LexicalMediaNode"; +import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection"; import {EditorFormModal} from "../../framework/modals"; import {EditorActionField} from "../../framework/blocks/action-field"; import {EditorButton} from "../../framework/buttons"; @@ -18,6 +17,9 @@ import {showImageManager} from "../../../utils/images"; import searchImageIcon from "@icons/editor/image-search.svg"; import searchIcon from "@icons/search.svg"; import {showLinkSelector} from "../../../utils/links"; +import {LinkField} from "../../framework/blocks/link-field"; +import {insertOrUpdateLink} from "../../../utils/formats"; +import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode"; export function $showImageForm(image: ImageNode, context: EditorUiContext) { const imageModal: EditorFormModal = context.manager.createModal('image'); @@ -38,7 +40,8 @@ export const image: EditorFormDefinition = { submitText: 'Apply', async action(formData, context: EditorUiContext) { context.editor.update(() => { - const selectedImage = $getNodeFromSelection(context.lastSelection, $isImageNode); + const selection = getLastSelection(context.editor); + const selectedImage = $getNodeFromSelection(selection, $isImageNode); if ($isImageNode(selectedImage)) { selectedImage.setSrc(formData.get('src')?.toString() || ''); selectedImage.setAltText(formData.get('alt')?.toString() || ''); @@ -94,37 +97,42 @@ export const image: EditorFormDefinition = { ], }; -export const link: EditorFormDefinition = { - submitText: 'Apply', - async action(formData, context: EditorUiContext) { - context.editor.update(() => { +export function $showLinkForm(link: LinkNode|null, context: EditorUiContext) { + const linkModal = context.manager.createModal('link'); - const url = formData.get('url')?.toString() || ''; - const title = formData.get('title')?.toString() || '' - const target = formData.get('target')?.toString() || ''; - const text = formData.get('text')?.toString() || ''; + if (link) { + const formDefaults: Record = { + url: link.getURL(), + text: link.getTextContent(), + title: link.getTitle() || '', + target: link.getTarget() || '', + } - const selection = $getSelection(); - let link = $getNodeFromSelection(selection, $isLinkNode); - if ($isLinkNode(link)) { - link.setURL(url); - link.setTarget(target); - link.setTitle(title); - } else { - link = $createLinkNode(url, { - title: title, - target: target, - }); + context.editor.update(() => { + const selection = $createNodeSelection(); + selection.add(link.getKey()); + $setSelection(selection); + }); - $insertNodes([link]); - } + linkModal.show(formDefaults); + } else { + context.editor.getEditorState().read(() => { + const selection = $getSelection(); + const text = selection?.getTextContent() || ''; + const formDefaults = {text}; + linkModal.show(formDefaults); + }); + } +} - if ($isLinkNode(link)) { - for (const child of link.getChildren()) { - child.remove(true); - } - link.append($createTextNode(text)); - } +export const link: EditorFormDefinition = { + submitText: 'Apply', + async action(formData, context: EditorUiContext) { + insertOrUpdateLink(context.editor, { + url: formData.get('url')?.toString() || '', + title: formData.get('title')?.toString() || '', + target: formData.get('target')?.toString() || '', + text: formData.get('text')?.toString() || '', }); return true; }, @@ -132,11 +140,11 @@ export const link: EditorFormDefinition = { { build() { return new EditorActionField( - new EditorFormField({ + new LinkField(new EditorFormField({ label: 'URL', name: 'url', type: 'text', - }), + })), new EditorButton({ label: 'Browse links', icon: searchIcon, @@ -178,6 +186,29 @@ export const link: EditorFormDefinition = { ], }; +export function $showMediaForm(media: MediaNode|null, context: EditorUiContext): void { + const mediaModal = context.manager.createModal('media'); + + let formDefaults = {}; + if (media) { + const nodeAttrs = media.getAttributes(); + const nodeDOM = media.exportDOM(context.editor).element; + const nodeHtml = (nodeDOM instanceof HTMLElement) ? nodeDOM.outerHTML : ''; + + formDefaults = { + src: nodeAttrs.src || nodeAttrs.data || media.getSources()[0]?.src || '', + width: nodeAttrs.width, + height: nodeAttrs.height, + embed: nodeHtml, + + // This is used so we can check for edits against the embed field on submit + embed_check: nodeHtml, + } + } + + mediaModal.show(formDefaults); +} + export const media: EditorFormDefinition = { submitText: 'Save', async action(formData, context: EditorUiContext) { @@ -189,13 +220,14 @@ export const media: EditorFormDefinition = { })); const embedCode = (formData.get('embed') || '').toString().trim(); - if (embedCode) { + const embedCheck = (formData.get('embed_check') || '').toString().trim(); + if (embedCode && embedCode !== embedCheck) { context.editor.update(() => { const node = $createMediaNodeFromHtml(embedCode); if (selectedNode && node) { selectedNode.replace(node) } else if (node) { - $insertNodeToNearestRoot(node); + $insertNodes([node]); } }); @@ -207,12 +239,20 @@ export const media: EditorFormDefinition = { const height = (formData.get('height') || '').toString().trim(); const width = (formData.get('width') || '').toString().trim(); - const updateNode = selectedNode || $createMediaNodeFromSrc(src); - updateNode.setSrc(src); - updateNode.setWidthAndHeight(width, height); - if (!selectedNode) { - $insertNodeToNearestRoot(updateNode); + // Update existing + if (selectedNode) { + selectedNode.setSrc(src); + selectedNode.setWidthAndHeight(width, height); + context.manager.triggerFutureStateRefresh(); + return; + } + + // Insert new + const node = $createMediaNodeFromSrc(src); + if (width || height) { + node.setWidthAndHeight(width, height); } + $insertNodes([node]); }); return true; @@ -249,10 +289,48 @@ export const media: EditorFormDefinition = { name: 'embed', type: 'textarea', }, + { + label: '', + name: 'embed_check', + type: 'hidden', + }, ], } ]) } }, ], +}; + +export function $showDetailsForm(details: DetailsNode|null, context: EditorUiContext) { + const linkModal = context.manager.createModal('details'); + if (!details) { + return; + } + + linkModal.show({ + summary: details.getSummary() + }); +} + +export const details: EditorFormDefinition = { + submitText: 'Save', + async action(formData, context: EditorUiContext) { + context.editor.update(() => { + const node = $getNodeFromSelection($getSelection(), $isDetailsNode); + const summary = (formData.get('summary') || '').toString().trim(); + if ($isDetailsNode(node)) { + node.setSummary(summary); + } + }); + + return true; + }, + fields: [ + { + label: 'Toggle label', + name: 'summary', + type: 'text', + }, + ], }; \ No newline at end of file