BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/forms/objects.ts

   1 import {
   2     EditorFormDefinition,
   3     EditorFormField,
   4     EditorFormTabs,
   5     EditorSelectFormFieldDefinition
   6 } from "../../framework/forms";
   7 import {EditorUiContext} from "../../framework/core";
   8 import {$createNodeSelection, $getSelection, $insertNodes, $setSelection} from "lexical";
   9 import {$isImageNode, ImageNode} from "@lexical/rich-text/LexicalImageNode";
  10 import {LinkNode} from "@lexical/link";
  11 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "@lexical/rich-text/LexicalMediaNode";
  12 import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";
  13 import {EditorFormModal} from "../../framework/modals";
  14 import {EditorActionField} from "../../framework/blocks/action-field";
  15 import {EditorButton} from "../../framework/buttons";
  16 import {showImageManager} from "../../../utils/images";
  17 import searchImageIcon from "@icons/editor/image-search.svg";
  18 import searchIcon from "@icons/search.svg";
  19 import {showLinkSelector} from "../../../utils/links";
  20 import {LinkField} from "../../framework/blocks/link-field";
  21 import {insertOrUpdateLink} from "../../../utils/formats";
  22 import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
  23
  24 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
  25     const imageModal: EditorFormModal = context.manager.createModal('image');
  26     const height = image.getHeight();
  27     const width = image.getWidth();
  28
  29     const formData = {
  30         src: image.getSrc(),
  31         alt: image.getAltText(),
  32         height: height === 0 ? '' : String(height),
  33         width: width === 0 ? '' : String(width),
  34     };
  35
  36     imageModal.show(formData);
  37 }
  38
  39 export const image: EditorFormDefinition = {
  40     submitText: 'Apply',
  41     async action(formData, context: EditorUiContext) {
  42         context.editor.update(() => {
  43             const selection = getLastSelection(context.editor);
  44             const selectedImage = $getNodeFromSelection(selection, $isImageNode);
  45             if ($isImageNode(selectedImage)) {
  46                 selectedImage.setSrc(formData.get('src')?.toString() || '');
  47                 selectedImage.setAltText(formData.get('alt')?.toString() || '');
  48
  49                 selectedImage.setWidth(Number(formData.get('width')?.toString() || '0'));
  50                 selectedImage.setHeight(Number(formData.get('height')?.toString() || '0'));
  51             }
  52         });
  53         return true;
  54     },
  55     fields: [
  56         {
  57             build() {
  58                 return new EditorActionField(
  59                     new EditorFormField({
  60                         label: 'Source',
  61                         name: 'src',
  62                         type: 'text',
  63                     }),
  64                     new EditorButton({
  65                         label: 'Browse files',
  66                         icon: searchImageIcon,
  67                         action(context: EditorUiContext) {
  68                             showImageManager((image) => {
  69                                  const modal =  context.manager.getActiveModal('image');
  70                                  if (modal) {
  71                                      modal.getForm().setValues({
  72                                          src: image.thumbs?.display || image.url,
  73                                          alt: image.name,
  74                                      });
  75                                  }
  76                             });
  77                         }
  78                     }),
  79                 );
  80             },
  81         },
  82         {
  83             label: 'Alternative description',
  84             name: 'alt',
  85             type: 'text',
  86         },
  87         {
  88             label: 'Width',
  89             name: 'width',
  90             type: 'text',
  91         },
  92         {
  93             label: 'Height',
  94             name: 'height',
  95             type: 'text',
  96         },
  97     ],
  98 };
  99
 100 export function $showLinkForm(link: LinkNode|null, context: EditorUiContext) {
 101     const linkModal = context.manager.createModal('link');
 102
 103     if (link) {
 104         const formDefaults: Record<string, string> = {
 105             url: link.getURL(),
 106             text: link.getTextContent(),
 107             title: link.getTitle() || '',
 108             target: link.getTarget() || '',
 109         }
 110
 111         context.editor.update(() => {
 112             const selection = $createNodeSelection();
 113             selection.add(link.getKey());
 114             $setSelection(selection);
 115         });
 116
 117         linkModal.show(formDefaults);
 118     } else {
 119         context.editor.getEditorState().read(() => {
 120             const selection = $getSelection();
 121             const text = selection?.getTextContent() || '';
 122             const formDefaults = {text};
 123             linkModal.show(formDefaults);
 124         });
 125     }
 126 }
 127
 128 export const link: EditorFormDefinition = {
 129     submitText: 'Apply',
 130     async action(formData, context: EditorUiContext) {
 131         insertOrUpdateLink(context.editor, {
 132             url: formData.get('url')?.toString() || '',
 133             title: formData.get('title')?.toString() || '',
 134             target: formData.get('target')?.toString() || '',
 135             text: formData.get('text')?.toString() || '',
 136         });
 137         return true;
 138     },
 139     fields: [
 140         {
 141             build() {
 142                 return new EditorActionField(
 143                     new LinkField(new EditorFormField({
 144                         label: 'URL',
 145                         name: 'url',
 146                         type: 'text',
 147                     })),
 148                     new EditorButton({
 149                         label: 'Browse links',
 150                         icon: searchIcon,
 151                         action(context: EditorUiContext) {
 152                             showLinkSelector(entity => {
 153                                 const modal =  context.manager.getActiveModal('link');
 154                                 if (modal) {
 155                                     modal.getForm().setValues({
 156                                         url: entity.link,
 157                                         text: entity.name,
 158                                         title: entity.name,
 159                                     });
 160                                 }
 161                             });
 162                         }
 163                     }),
 164                 );
 165             },
 166         },
 167         {
 168             label: 'Text to display',
 169             name: 'text',
 170             type: 'text',
 171         },
 172         {
 173             label: 'Title',
 174             name: 'title',
 175             type: 'text',
 176         },
 177         {
 178             label: 'Open link in...',
 179             name: 'target',
 180             type: 'select',
 181             valuesByLabel: {
 182                 'Current window': '',
 183                 'New window': '_blank',
 184             }
 185         } as EditorSelectFormFieldDefinition,
 186     ],
 187 };
 188
 189 export function $showMediaForm(media: MediaNode|null, context: EditorUiContext): void {
 190     const mediaModal = context.manager.createModal('media');
 191
 192     let formDefaults = {};
 193     if (media) {
 194         const nodeAttrs = media.getAttributes();
 195         formDefaults = {
 196             src: nodeAttrs.src || nodeAttrs.data || '',
 197             width: nodeAttrs.width,
 198             height: nodeAttrs.height,
 199             embed: '',
 200         }
 201     }
 202
 203     mediaModal.show(formDefaults);
 204 }
 205
 206 export const media: EditorFormDefinition = {
 207     submitText: 'Save',
 208     async action(formData, context: EditorUiContext) {
 209         const selectedNode: MediaNode|null = await (new Promise((res, rej) => {
 210             context.editor.getEditorState().read(() => {
 211                 const node = $getNodeFromSelection($getSelection(), $isMediaNode);
 212                 res(node as MediaNode|null);
 213             });
 214         }));
 215
 216         const embedCode = (formData.get('embed') || '').toString().trim();
 217         if (embedCode) {
 218             context.editor.update(() => {
 219                 const node = $createMediaNodeFromHtml(embedCode);
 220                 if (selectedNode && node) {
 221                     selectedNode.replace(node)
 222                 } else if (node) {
 223                     $insertNodes([node]);
 224                 }
 225             });
 226
 227             return true;
 228         }
 229
 230         context.editor.update(() => {
 231             const src = (formData.get('src') || '').toString().trim();
 232             const height = (formData.get('height') || '').toString().trim();
 233             const width = (formData.get('width') || '').toString().trim();
 234
 235             // Update existing
 236             if (selectedNode) {
 237                 selectedNode.setSrc(src);
 238                 selectedNode.setWidthAndHeight(width, height);
 239                 return;
 240             }
 241
 242             // Insert new
 243             const node = $createMediaNodeFromSrc(src);
 244             if (width || height) {
 245                 node.setWidthAndHeight(width, height);
 246             }
 247             $insertNodes([node]);
 248         });
 249
 250         return true;
 251     },
 252     fields: [
 253         {
 254             build() {
 255                 return new EditorFormTabs([
 256                     {
 257                         label: 'General',
 258                         contents: [
 259                             {
 260                                 label: 'Source',
 261                                 name: 'src',
 262                                 type: 'text',
 263                             },
 264                             {
 265                                 label: 'Width',
 266                                 name: 'width',
 267                                 type: 'text',
 268                             },
 269                             {
 270                                 label: 'Height',
 271                                 name: 'height',
 272                                 type: 'text',
 273                             },
 274                         ],
 275                     },
 276                     {
 277                         label: 'Embed',
 278                         contents: [
 279                             {
 280                                 label: 'Paste your embed code below:',
 281                                 name: 'embed',
 282                                 type: 'textarea',
 283                             },
 284                         ],
 285                     }
 286                 ])
 287             }
 288         },
 289     ],
 290 };
 291
 292 export function $showDetailsForm(details: DetailsNode|null, context: EditorUiContext) {
 293     const linkModal = context.manager.createModal('details');
 294     if (!details) {
 295         return;
 296     }
 297
 298     linkModal.show({
 299         summary: details.getSummary()
 300     });
 301 }
 302
 303 export const details: EditorFormDefinition = {
 304     submitText: 'Save',
 305     async action(formData, context: EditorUiContext) {
 306         context.editor.update(() => {
 307             const node = $getNodeFromSelection($getSelection(), $isDetailsNode);
 308             const summary = (formData.get('summary') || '').toString().trim();
 309             if ($isDetailsNode(node)) {
 310                 node.setSummary(summary);
 311             }
 312         });
 313
 314         return true;
 315     },
 316     fields: [
 317         {
 318             label: 'Toggle label',
 319             name: 'summary',
 320             type: 'text',
 321         },
 322     ],
 323 };