5 EditorSelectFormFieldDefinition
6 } from "../../framework/forms";
7 import {EditorUiContext} from "../../framework/core";
8 import {$createTextNode, $getSelection, $insertNodes} from "lexical";
9 import {$isImageNode, ImageNode} from "../../../nodes/image";
10 import {$createLinkNode, $isLinkNode} from "@lexical/link";
11 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
12 import {$insertNodeToNearestRoot} from "@lexical/utils";
13 import {$getNodeFromSelection} from "../../../utils/selection";
14 import {EditorFormModal} from "../../framework/modals";
15 import {EditorActionField} from "../../framework/blocks/action-field";
16 import {EditorButton} from "../../framework/buttons";
17 import {showImageManager} from "../../../utils/images";
18 import searchImageIcon from "@icons/editor/image-search.svg";
19 import searchIcon from "@icons/search.svg";
20 import {showLinkSelector} from "../../../utils/links";
21 import {LinkField} from "../../framework/blocks/link-field";
23 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
24 const imageModal: EditorFormModal = context.manager.createModal('image');
25 const height = image.getHeight();
26 const width = image.getWidth();
30 alt: image.getAltText(),
31 height: height === 0 ? '' : String(height),
32 width: width === 0 ? '' : String(width),
35 imageModal.show(formData);
38 export const image: EditorFormDefinition = {
40 async action(formData, context: EditorUiContext) {
41 context.editor.update(() => {
42 const selectedImage = $getNodeFromSelection(context.lastSelection, $isImageNode);
43 if ($isImageNode(selectedImage)) {
44 selectedImage.setSrc(formData.get('src')?.toString() || '');
45 selectedImage.setAltText(formData.get('alt')?.toString() || '');
47 selectedImage.setWidth(Number(formData.get('width')?.toString() || '0'));
48 selectedImage.setHeight(Number(formData.get('height')?.toString() || '0'));
56 return new EditorActionField(
63 label: 'Browse files',
64 icon: searchImageIcon,
65 action(context: EditorUiContext) {
66 showImageManager((image) => {
67 const modal = context.manager.getActiveModal('image');
69 modal.getForm().setValues({
70 src: image.thumbs?.display || image.url,
81 label: 'Alternative description',
98 export const link: EditorFormDefinition = {
100 async action(formData, context: EditorUiContext) {
101 context.editor.update(() => {
103 const url = formData.get('url')?.toString() || '';
104 const title = formData.get('title')?.toString() || ''
105 const target = formData.get('target')?.toString() || '';
106 const text = formData.get('text')?.toString() || '';
108 const selection = $getSelection();
109 let link = $getNodeFromSelection(selection, $isLinkNode);
110 if ($isLinkNode(link)) {
112 link.setTarget(target);
113 link.setTitle(title);
115 link = $createLinkNode(url, {
120 $insertNodes([link]);
123 if ($isLinkNode(link)) {
124 for (const child of link.getChildren()) {
127 link.append($createTextNode(text));
135 return new EditorActionField(
136 new LinkField(new EditorFormField({
142 label: 'Browse links',
144 action(context: EditorUiContext) {
145 showLinkSelector(entity => {
146 const modal = context.manager.getActiveModal('link');
148 modal.getForm().setValues({
161 label: 'Text to display',
171 label: 'Open link in...',
175 'Current window': '',
176 'New window': '_blank',
178 } as EditorSelectFormFieldDefinition,
182 export const media: EditorFormDefinition = {
184 async action(formData, context: EditorUiContext) {
185 const selectedNode: MediaNode|null = await (new Promise((res, rej) => {
186 context.editor.getEditorState().read(() => {
187 const node = $getNodeFromSelection($getSelection(), $isMediaNode);
188 res(node as MediaNode|null);
192 const embedCode = (formData.get('embed') || '').toString().trim();
194 context.editor.update(() => {
195 const node = $createMediaNodeFromHtml(embedCode);
196 if (selectedNode && node) {
197 selectedNode.replace(node)
199 $insertNodeToNearestRoot(node);
206 context.editor.update(() => {
207 const src = (formData.get('src') || '').toString().trim();
208 const height = (formData.get('height') || '').toString().trim();
209 const width = (formData.get('width') || '').toString().trim();
211 const updateNode = selectedNode || $createMediaNodeFromSrc(src);
212 updateNode.setSrc(src);
213 updateNode.setWidthAndHeight(width, height);
215 $insertNodeToNearestRoot(updateNode);
224 return new EditorFormTabs([
249 label: 'Paste your embed code below:',