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";
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');
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() || '');
],
};
-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<string, string> = {
+ 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;
},
],
};
+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) {
}));
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]);
}
});
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;
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
projects / bookstack / blobdiff