5htp-core 0.4.9-96 → 0.4.9-97

package/src/client/components/inputv3/Rte/nodes/ImageNode.tsx

@@ -7,260 +7,276 @@
  */
 
 import type {
-  DOMConversionMap,
-  DOMConversionOutput,
-  DOMExportOutput,
-  EditorConfig,
-  LexicalEditor,
-  LexicalNode,
-  NodeKey,
-  SerializedEditor,
-  SerializedLexicalNode,
-  Spread,
+    DOMConversionMap,
+    DOMConversionOutput,
+    DOMExportOutput,
+    EditorConfig,
+    LexicalEditor,
+    LexicalNode,
+    NodeKey,
+    SerializedEditor,
+    SerializedLexicalNode,
+    Spread,
 } from 'lexical';
 
-import {$applyNodeReplacement, createEditor, DecoratorNode} from 'lexical';
+import { $generateHtmlFromNodes } from '@lexical/html';
+
+import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical';
 import * as React from 'react';
-import {Suspense} from 'react';
+import { Suspense } from 'react';
 
 const ImageComponent = React.lazy(() => import('./ImageComponent'));
 
 export interface ImagePayload {
-  altText: string;
-  caption?: LexicalEditor;
-  height?: number;
-  key?: NodeKey;
-  maxWidth?: number;
-  showCaption?: boolean;
-  src: string;
-  width?: number;
-  captionsEnabled?: boolean;
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    captionsEnabled?: boolean;
 }
 
 function isGoogleDocCheckboxImg(img: HTMLImageElement): boolean {
-  return (
-    img.parentElement != null &&
-    img.parentElement.tagName === 'LI' &&
-    img.previousSibling === null &&
-    img.getAttribute('aria-roledescription') === 'checkbox'
-  );
+    return (
+        img.parentElement != null &&
+        img.parentElement.tagName === 'LI' &&
+        img.previousSibling === null &&
+        img.getAttribute('aria-roledescription') === 'checkbox'
+    );
 }
 
 function $convertImageElement(domNode: Node): null | DOMConversionOutput {
-  const img = domNode as HTMLImageElement;
-  if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
-    return null;
-  }
-  const {alt: altText, src, width, height} = img;
-  const node = $createImageNode({altText, height, src, width});
-  return {node};
+    const img = domNode as HTMLImageElement;
+    if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
+        return null;
+    }
+    const { alt: altText, src, width, height } = img;
+    const node = $createImageNode({ altText, height, src, width });
+    return { node };
 }
 
 export type SerializedImageNode = Spread<
-  {
-    altText: string;
-    caption: SerializedEditor;
-    height?: number;
-    maxWidth: number;
-    showCaption: boolean;
-    src: string;
-    width?: number;
-  },
-  SerializedLexicalNode
+    {
+        altText: string;
+        caption: SerializedEditor;
+        height?: number;
+        maxWidth: number;
+        showCaption: boolean;
+        src: string;
+        width?: number;
+    },
+    SerializedLexicalNode
 >;
 
-export class ImageNode extends DecoratorNode<JSX.Element> {
-  __src: string;
-  __altText: string;
-  __width: 'inherit' | number;
-  __height: 'inherit' | number;
-  __maxWidth: number;
-  __showCaption: boolean;
-  __caption: LexicalEditor;
-  // Captions cannot yet be used within editor cells
-  __captionsEnabled: boolean;
+export class ImageNode extends DecoratorNode<React.JSX.Element> {
+    __src: string;
+    __altText: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    // Captions cannot yet be used within editor cells
+    __captionsEnabled: boolean;
 
-  static getType(): string {
-    return 'image';
-  }
+    static getType(): string {
+        return 'image';
+    }
 
-  static clone(node: ImageNode): ImageNode {
-    return new ImageNode(
-      node.__src,
-      node.__altText,
-      node.__maxWidth,
-      node.__width,
-      node.__height,
-      node.__showCaption,
-      node.__caption,
-      node.__captionsEnabled,
-      node.__key,
-    );
-  }
+    static clone(node: ImageNode): ImageNode {
+        return new ImageNode(
+            node.__src,
+            node.__altText,
+            node.__maxWidth,
+            node.__width,
+            node.__height,
+            node.__showCaption,
+            node.__caption,
+            node.__captionsEnabled,
+            node.__key,
+        );
+    }
 
-  static importJSON(serializedNode: SerializedImageNode): ImageNode {
-    const {altText, height, width, maxWidth, caption, src, showCaption} =
-      serializedNode;
-    const node = $createImageNode({
-      altText,
-      height,
-      maxWidth,
-      showCaption,
-      src,
-      width,
-    });
-    const nestedEditor = node.__caption;
-    const editorState = nestedEditor.parseEditorState(caption.editorState);
-    if (!editorState.isEmpty()) {
-      nestedEditor.setEditorState(editorState);
+    static importJSON(serializedNode: SerializedImageNode): ImageNode {
+        const { altText, height, width, maxWidth, caption, src, showCaption } =
+            serializedNode;
+        const node = $createImageNode({
+            altText,
+            height,
+            maxWidth,
+            showCaption,
+            src,
+            width,
+        });
+        const nestedEditor = node.__caption;
+        const editorState = nestedEditor.parseEditorState(caption.editorState);
+        if (!editorState.isEmpty()) {
+            nestedEditor.setEditorState(editorState);
+        }
+        return node;
     }
-    return node;
-  }
 
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement('img');
-    element.setAttribute('src', this.__src);
-    element.setAttribute('alt', this.__altText);
-    element.setAttribute('width', this.__width.toString());
-    element.setAttribute('height', this.__height.toString());
-    return {element};
-  }
+    exportDOM(): DOMExportOutput {
+        const figure = document.createElement('figure');
 
-  static importDOM(): DOMConversionMap | null {
-    return {
-      img: (node: Node) => ({
-        conversion: $convertImageElement,
-        priority: 0,
-      }),
-    };
-  }
+        const img = document.createElement('img');
+        figure.appendChild(img);
+        img.setAttribute('src', this.__src);
+        img.setAttribute('alt', this.__altText);
+        img.setAttribute('width', this.__width.toString());
+        img.setAttribute('height', this.__height.toString());
 
-  constructor(
-    src: string,
-    altText: string,
-    maxWidth: number,
-    width?: 'inherit' | number,
-    height?: 'inherit' | number,
-    showCaption?: boolean,
-    caption?: LexicalEditor,
-    captionsEnabled?: boolean,
-    key?: NodeKey,
-  ) {
-    super(key);
-    this.__src = src;
-    this.__altText = altText;
-    this.__maxWidth = maxWidth;
-    this.__width = width || 'inherit';
-    this.__height = height || 'inherit';
-    this.__showCaption = showCaption || false;
-    this.__caption =
-      caption ||
-      createEditor({
-        nodes: [],
-      });
-    this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
-  }
+        // Caption
+        if (this.__showCaption) {
+            const figcaption = document.createElement('figcaption');
+            const captionHtml = this.__caption.getEditorState().read(() => {
+                return $generateHtmlFromNodes(this.__caption, null);
+            });
+            figcaption.innerHTML = captionHtml;
+            figure.appendChild(figcaption);
+        }
 
-  exportJSON(): SerializedImageNode {
-    return {
-      altText: this.getAltText(),
-      caption: this.__caption.toJSON(),
-      height: this.__height === 'inherit' ? 0 : this.__height,
-      maxWidth: this.__maxWidth,
-      showCaption: this.__showCaption,
-      src: this.getSrc(),
-      type: 'image',
-      version: 1,
-      width: this.__width === 'inherit' ? 0 : this.__width,
-    };
-  }
+        return { element: figure };
+    }
 
-  setWidthAndHeight(
-    width: 'inherit' | number,
-    height: 'inherit' | number,
-  ): void {
-    const writable = this.getWritable();
-    writable.__width = width;
-    writable.__height = height;
-  }
+    static importDOM(): DOMConversionMap | null {
+        return {
+            img: (node: Node) => ({
+                conversion: $convertImageElement,
+                priority: 0,
+            }),
+        };
+    }
 
-  setShowCaption(showCaption: boolean): void {
-    const writable = this.getWritable();
-    writable.__showCaption = showCaption;
-  }
+    constructor(
+        src: string,
+        altText: string,
+        maxWidth: number,
+        width?: 'inherit' | number,
+        height?: 'inherit' | number,
+        showCaption?: boolean,
+        caption?: LexicalEditor,
+        captionsEnabled?: boolean,
+        key?: NodeKey,
+    ) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+        this.__showCaption = showCaption || false;
+        this.__caption =
+            caption ||
+            createEditor({
+                nodes: [],
+            });
+        this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+    }
 
-  // View
+    exportJSON(): SerializedImageNode {
+        return {
+            altText: this.getAltText(),
+            caption: this.__caption.toJSON(),
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            showCaption: this.__showCaption,
+            src: this.getSrc(),
+            type: 'image',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+        };
+    }
 
-  createDOM(config: EditorConfig): HTMLElement {
-    const span = document.createElement('span');
-    const theme = config.theme;
-    const className = theme.image;
-    if (className !== undefined) {
-      span.className = className;
+    setWidthAndHeight(
+        width: 'inherit' | number,
+        height: 'inherit' | number,
+    ): void {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
     }
-    return span;
-  }
 
-  updateDOM(): false {
-    return false;
-  }
+    setShowCaption(showCaption: boolean): void {
+        const writable = this.getWritable();
+        writable.__showCaption = showCaption;
+    }
 
-  getSrc(): string {
-    return this.__src;
-  }
+    // View
 
-  getAltText(): string {
-    return this.__altText;
-  }
+    createDOM(config: EditorConfig): HTMLElement {
+        const span = document.createElement('span');
+        const theme = config.theme;
+        const className = theme.image;
+        if (className !== undefined) {
+            span.className = className;
+        }
+        return span;
+    }
 
-  decorate(): JSX.Element {
-    return (
-      <Suspense fallback={null}>
-        <ImageComponent
-          src={this.__src}
-          altText={this.__altText}
-          width={this.__width}
-          height={this.__height}
-          maxWidth={this.__maxWidth}
-          nodeKey={this.getKey()}
-          showCaption={this.__showCaption}
-          caption={this.__caption}
-          captionsEnabled={this.__captionsEnabled}
-          resizable={true}
-        />
-      </Suspense>
-    );
-  }
+    updateDOM(): false {
+        return false;
+    }
+
+    getSrc(): string {
+        return this.__src;
+    }
+
+    getAltText(): string {
+        return this.__altText;
+    }
+
+    decorate(): React.JSX.Element {
+        return (
+            <Suspense fallback={null}>
+                <ImageComponent
+                    src={this.__src}
+                    altText={this.__altText}
+                    width={this.__width}
+                    height={this.__height}
+                    maxWidth={this.__maxWidth}
+                    nodeKey={this.getKey()}
+                    showCaption={this.__showCaption}
+                    caption={this.__caption}
+                    captionsEnabled={this.__captionsEnabled}
+                    resizable={true}
+                />
+            </Suspense>
+        );
+    }
 }
 
 export function $createImageNode({
-  altText,
-  height,
-  maxWidth = 500,
-  captionsEnabled,
-  src,
-  width,
-  showCaption,
-  caption,
-  key,
+    altText,
+    height,
+    maxWidth = 500,
+    captionsEnabled,
+    src,
+    width,
+    showCaption,
+    caption,
+    key,
 }: ImagePayload): ImageNode {
-  return $applyNodeReplacement(
-    new ImageNode(
-      src,
-      altText,
-      maxWidth,
-      width,
-      height,
-      showCaption,
-      caption,
-      captionsEnabled,
-      key,
-    ),
-  );
+    return $applyNodeReplacement(
+        new ImageNode(
+            src,
+            altText,
+            maxWidth,
+            width,
+            height,
+            showCaption,
+            caption,
+            captionsEnabled,
+            key,
+        ),
+    );
 }
 
 export function $isImageNode(
-  node: LexicalNode | null | undefined,
+    node: LexicalNode | null | undefined,
 ): node is ImageNode {
-  return node instanceof ImageNode;
+    return node instanceof ImageNode;
 }

package/src/client/components/inputv3/Rte/nodes/PollComponent.tsx

@@ -56,7 +56,7 @@ function PollOptionComponent({
         cb: (pollNode: PollNode) => void,
         onSelect?: () => void,
     ) => void;
-}): JSX.Element {
+}): React.JSX.Element {
 
     const { clientID } = useCollaborationContext();
     const checkboxRef = useRef(null);
@@ -93,23 +93,19 @@ function PollOptionComponent({
                 {votes > 0 && (votes === 1 ? '1 vote' : `${votes} votes`)}
             </span>
             <Input
+                wrapper={false}
                 value={text}
-                onChange={(e) => {
-                    const target = e.target;
-                    const value = target.value;
-                    const selectionStart = target.selectionStart;
-                    const selectionEnd = target.selectionEnd;
+                onChange={(value) => {
                     withPollNode(
                         (node) => {
                             node.setOptionText(option, value);
                         },
                         () => {
-                            target.selectionStart = selectionStart;
-                            target.selectionEnd = selectionEnd;
+                            
                         },
                     );
                 }}
-                placeholder={`Option ${index + 1}`}
+                title={`Option ${index + 1}`}
                 className="col-1"
             />
             <Button
@@ -133,7 +129,7 @@ export default function PollComponent({
     nodeKey: NodeKey;
     options: Options;
     question: string;
-}): JSX.Element {
+}): React.JSX.Element {
 
     const [editor] = useLexicalComposerContext();
     const totalVotes = useMemo(() => getTotalVotes(options), [options]);

package/src/client/components/inputv3/Rte/nodes/PollNode.tsx

@@ -74,7 +74,7 @@ function $convertPollElement(domNode: HTMLElement): DOMConversionOutput | null {
     return null;
 }
 
-export class PollNode extends DecoratorNode<JSX.Element> {
+export class PollNode extends DecoratorNode<React.JSX.Element> {
     __question: string;
     __options: Options;
 
@@ -91,7 +91,7 @@ export class PollNode extends DecoratorNode<JSX.Element> {
             serializedNode.question,
             serializedNode.options,
         );
-        serializedNode.options.forEach(node.addOption);
+        //serializedNode.options.forEach(node.addOption.bind(node));
         return node;
     }
 
@@ -185,7 +185,7 @@ export class PollNode extends DecoratorNode<JSX.Element> {
         return false;
     }
 
-    decorate(): JSX.Element {
+    decorate(): React.JSX.Element {
         return (
             <Suspense fallback={null}>
                 <PollComponent

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.css

@@ -6,16 +6,6 @@
  *
  *
  */
-.PlaygroundEditorTheme__ltr {
-  text-align: left;
-}
-.PlaygroundEditorTheme__rtl {
-  text-align: right;
-}
-.PlaygroundEditorTheme__paragraph {
-  margin: 0;
-  position: relative;
-}
 .PlaygroundEditorTheme__h1 {
   font-size: 24px;
   color: rgb(5, 5, 5);
@@ -416,18 +406,8 @@
   color: #ccc;
 }
 .PlaygroundEditorTheme__hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1em 0;
   cursor: pointer;
 }
-.PlaygroundEditorTheme__hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: #ccc;
-  line-height: 2px;
-}
 .PlaygroundEditorTheme__hr.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.ts

@@ -84,12 +84,12 @@ const theme: EditorThemeClasses = {
         ],
         ul: 'liste',
     },
-    ltr: 'PlaygroundEditorTheme__ltr',
+    ltr: '',
     mark: 'PlaygroundEditorTheme__mark',
     markOverlap: 'PlaygroundEditorTheme__markOverlap',
-    paragraph: 'PlaygroundEditorTheme__paragraph',
+    paragraph: '',
     quote: '',
-    rtl: 'PlaygroundEditorTheme__rtl',
+    rtl: 'txt-right',
     table: 'PlaygroundEditorTheme__table',
     tableCell: 'PlaygroundEditorTheme__tableCell',
     tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',