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 const media: EditorFormDefinition = {
 190     submitText: 'Save',
 191     async action(formData, context: EditorUiContext) {
 192         const selectedNode: MediaNode|null = await (new Promise((res, rej) => {
 193             context.editor.getEditorState().read(() => {
 194                 const node = $getNodeFromSelection($getSelection(), $isMediaNode);
 195                 res(node as MediaNode|null);
 196             });
 197         }));
 198
 199         const embedCode = (formData.get('embed') || '').toString().trim();
 200         if (embedCode) {
 201             context.editor.update(() => {
 202                 const node = $createMediaNodeFromHtml(embedCode);
 203                 if (selectedNode && node) {
 204                     selectedNode.replace(node)
 205                 } else if (node) {
 206                     $insertNodes([node]);
 207                 }
 208             });
 209
 210             return true;
 211         }
 212
 213         context.editor.update(() => {
 214             const src = (formData.get('src') || '').toString().trim();
 215             const height = (formData.get('height') || '').toString().trim();
 216             const width = (formData.get('width') || '').toString().trim();
 217
 218             const updateNode = selectedNode || $createMediaNodeFromSrc(src);
 219             updateNode.setSrc(src);
 220             updateNode.setWidthAndHeight(width, height);
 221             if (!selectedNode) {
 222                 $insertNodes([updateNode]);
 223             }
 224         });
 225
 226         return true;
 227     },
 228     fields: [
 229         {
 230             build() {
 231                 return new EditorFormTabs([
 232                     {
 233                         label: 'General',
 234                         contents: [
 235                             {
 236                                 label: 'Source',
 237                                 name: 'src',
 238                                 type: 'text',
 239                             },
 240                             {
 241                                 label: 'Width',
 242                                 name: 'width',
 243                                 type: 'text',
 244                             },
 245                             {
 246                                 label: 'Height',
 247                                 name: 'height',
 248                                 type: 'text',
 249                             },
 250                         ],
 251                     },
 252                     {
 253                         label: 'Embed',
 254                         contents: [
 255                             {
 256                                 label: 'Paste your embed code below:',
 257                                 name: 'embed',
 258                                 type: 'textarea',
 259                             },
 260                         ],
 261                     }
 262                 ])
 263             }
 264         },
 265     ],
 266 };
 267
 268 export function $showDetailsForm(details: DetailsNode|null, context: EditorUiContext) {
 269     const linkModal = context.manager.createModal('details');
 270     if (!details) {
 271         return;
 272     }
 273
 274     linkModal.show({
 275         summary: details.getSummary()
 276     });
 277 }
 278
 279 export const details: EditorFormDefinition = {
 280     submitText: 'Save',
 281     async action(formData, context: EditorUiContext) {
 282         context.editor.update(() => {
 283             const node = $getNodeFromSelection($getSelection(), $isDetailsNode);
 284             const summary = (formData.get('summary') || '').toString().trim();
 285             if ($isDetailsNode(node)) {
 286                 node.setSummary(summary);
 287             }
 288         });
 289
 290         return true;
 291     },
 292     fields: [
 293         {
 294             label: 'Toggle label',
 295             name: 'summary',
 296             type: 'text',
 297         },
 298     ],
 299 };