5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/nodes/InlineImageNode/InlineImageNode.css

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.InlineImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+  font-size: 14px;
+  line-height: 1.4em;
+  width: calc(100% - 20px);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.InlineImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  bottom: 10px;
+  left: 10px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.InlineImageNode_Checkbox:checked,
+.InlineImageNode_Checkbox:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.InlineImageNode_Checkbox:checked + label,
+.InlineImageNode_Checkbox:not(:checked) + label {
+  position: absolute;
+  padding-right: 55px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+}
+
+.InlineImageNode_Checkbox:checked + label:before,
+.InlineImageNode_Checkbox:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #666;
+  background: #fff;
+}
+
+.InlineImageNode_Checkbox:checked + label:after,
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #222222;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+.InlineImageNode_Checkbox:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}

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

@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedEditor,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+
+import {$applyNodeReplacement, createEditor, DecoratorNode} from 'lexical';
+import * as React from 'react';
+import {Suspense} from 'react';
+
+const InlineImageComponent = React.lazy(() => import('./InlineImageComponent'));
+
+export type Position = 'left' | 'right' | 'full' | undefined;
+
+export interface InlineImagePayload {
+  altText: string;
+  caption?: LexicalEditor;
+  height?: number;
+  key?: NodeKey;
+  showCaption?: boolean;
+  src: string;
+  width?: number;
+  position?: Position;
+}
+
+export interface UpdateInlineImagePayload {
+  altText?: string;
+  showCaption?: boolean;
+  position?: Position;
+}
+
+function $convertInlineImageElement(domNode: Node): null | DOMConversionOutput {
+  if (domNode instanceof HTMLImageElement) {
+    const {alt: altText, src, width, height} = domNode;
+    const node = $createInlineImageNode({altText, height, src, width});
+    return {node};
+  }
+  return null;
+}
+
+export type SerializedInlineImageNode = Spread<
+  {
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+    position?: Position;
+  },
+  SerializedLexicalNode
+>;
+
+export class InlineImageNode extends DecoratorNode<JSX.Element> {
+  __src: string;
+  __altText: string;
+  __width: 'inherit' | number;
+  __height: 'inherit' | number;
+  __showCaption: boolean;
+  __caption: LexicalEditor;
+  __position: Position;
+
+  static getType(): string {
+    return 'inline-image';
+  }
+
+  static clone(node: InlineImageNode): InlineImageNode {
+    return new InlineImageNode(
+      node.__src,
+      node.__altText,
+      node.__position,
+      node.__width,
+      node.__height,
+      node.__showCaption,
+      node.__caption,
+      node.__key,
+    );
+  }
+
+  static importJSON(
+    serializedNode: SerializedInlineImageNode,
+  ): InlineImageNode {
+    const {altText, height, width, caption, src, showCaption, position} =
+      serializedNode;
+    const node = $createInlineImageNode({
+      altText,
+      height,
+      position,
+      showCaption,
+      src,
+      width,
+    });
+    const nestedEditor = node.__caption;
+    const editorState = nestedEditor.parseEditorState(caption.editorState);
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      img: (node: Node) => ({
+        conversion: $convertInlineImageElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  constructor(
+    src: string,
+    altText: string,
+    position: Position,
+    width?: 'inherit' | number,
+    height?: 'inherit' | number,
+    showCaption?: boolean,
+    caption?: LexicalEditor,
+    key?: NodeKey,
+  ) {
+    super(key);
+    this.__src = src;
+    this.__altText = altText;
+    this.__width = width || 'inherit';
+    this.__height = height || 'inherit';
+    this.__showCaption = showCaption || false;
+    this.__caption = caption || createEditor();
+    this.__position = position;
+  }
+
+  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};
+  }
+
+  exportJSON(): SerializedInlineImageNode {
+    return {
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === 'inherit' ? 0 : this.__height,
+      position: this.__position,
+      showCaption: this.__showCaption,
+      src: this.getSrc(),
+      type: 'inline-image',
+      version: 1,
+      width: this.__width === 'inherit' ? 0 : this.__width,
+    };
+  }
+
+  getSrc(): string {
+    return this.__src;
+  }
+
+  getAltText(): string {
+    return this.__altText;
+  }
+
+  setAltText(altText: string): void {
+    const writable = this.getWritable();
+    writable.__altText = altText;
+  }
+
+  setWidthAndHeight(
+    width: 'inherit' | number,
+    height: 'inherit' | number,
+  ): void {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+
+  getShowCaption(): boolean {
+    return this.__showCaption;
+  }
+
+  setShowCaption(showCaption: boolean): void {
+    const writable = this.getWritable();
+    writable.__showCaption = showCaption;
+  }
+
+  getPosition(): Position {
+    return this.__position;
+  }
+
+  setPosition(position: Position): void {
+    const writable = this.getWritable();
+    writable.__position = position;
+  }
+
+  update(payload: UpdateInlineImagePayload): void {
+    const writable = this.getWritable();
+    const {altText, showCaption, position} = payload;
+    if (altText !== undefined) {
+      writable.__altText = altText;
+    }
+    if (showCaption !== undefined) {
+      writable.__showCaption = showCaption;
+    }
+    if (position !== undefined) {
+      writable.__position = position;
+    }
+  }
+
+  // View
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const span = document.createElement('span');
+    const className = `${config.theme.inlineImage} position-${this.__position}`;
+    if (className !== undefined) {
+      span.className = className;
+    }
+    return span;
+  }
+
+  updateDOM(
+    prevNode: InlineImageNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): false {
+    const position = this.__position;
+    if (position !== prevNode.__position) {
+      const className = `${config.theme.inlineImage} position-${position}`;
+      if (className !== undefined) {
+        dom.className = className;
+      }
+    }
+    return false;
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <InlineImageComponent
+          src={this.__src}
+          altText={this.__altText}
+          width={this.__width}
+          height={this.__height}
+          nodeKey={this.getKey()}
+          showCaption={this.__showCaption}
+          caption={this.__caption}
+          position={this.__position}
+        />
+      </Suspense>
+    );
+  }
+}
+
+export function $createInlineImageNode({
+  altText,
+  position,
+  height,
+  src,
+  width,
+  showCaption,
+  caption,
+  key,
+}: InlineImagePayload): InlineImageNode {
+  return $applyNodeReplacement(
+    new InlineImageNode(
+      src,
+      altText,
+      position,
+      width,
+      height,
+      showCaption,
+      caption,
+      key,
+    ),
+  );
+}
+
+export function $isInlineImageNode(
+  node: LexicalNode | null | undefined,
+): node is InlineImageNode {
+  return node instanceof InlineImageNode;
+}

package/src/client/components/inputv3/Rte/nodes/KeywordNode.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {EditorConfig, LexicalNode, SerializedTextNode} from 'lexical';
+
+import {TextNode} from 'lexical';
+
+export type SerializedKeywordNode = SerializedTextNode;
+
+export class KeywordNode extends TextNode {
+  static getType(): string {
+    return 'keyword';
+  }
+
+  static clone(node: KeywordNode): KeywordNode {
+    return new KeywordNode(node.__text, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedKeywordNode): KeywordNode {
+    const node = $createKeywordNode(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  exportJSON(): SerializedKeywordNode {
+    return {
+      ...super.exportJSON(),
+      type: 'keyword',
+      version: 1,
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.style.cursor = 'default';
+    dom.className = 'keyword';
+    return dom;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+}
+
+export function $createKeywordNode(keyword: string): KeywordNode {
+  return new KeywordNode(keyword);
+}
+
+export function $isKeywordNode(node: LexicalNode | null | undefined): boolean {
+  return node instanceof KeywordNode;
+}

package/src/client/components/inputv3/Rte/nodes/LayoutContainerNode.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {ElementNode} from 'lexical';
+
+export type SerializedLayoutContainerNode = Spread<
+  {
+    templateColumns: string;
+  },
+  SerializedElementNode
+>;
+
+function $convertLayoutContainerElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const styleAttributes = window.getComputedStyle(domNode);
+  const templateColumns = styleAttributes.getPropertyValue(
+    'grid-template-columns',
+  );
+  if (templateColumns) {
+    const node = $createLayoutContainerNode(templateColumns);
+    return {node};
+  }
+  return null;
+}
+
+export class LayoutContainerNode extends ElementNode {
+  __templateColumns: string;
+
+  constructor(templateColumns: string, key?: NodeKey) {
+    super(key);
+    this.__templateColumns = templateColumns;
+  }
+
+  static getType(): string {
+    return 'layout-container';
+  }
+
+  static clone(node: LayoutContainerNode): LayoutContainerNode {
+    return new LayoutContainerNode(node.__templateColumns, node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    dom.style.gridTemplateColumns = this.__templateColumns;
+    if (typeof config.theme.layoutContainer === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutContainer);
+    }
+    return dom;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div');
+    element.style.gridTemplateColumns = this.__templateColumns;
+    element.setAttribute('data-lexical-layout-container', 'true');
+    return {element};
+  }
+
+  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+    if (prevNode.__templateColumns !== this.__templateColumns) {
+      dom.style.gridTemplateColumns = this.__templateColumns;
+    }
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-layout-container')) {
+          return null;
+        }
+        return {
+          conversion: $convertLayoutContainerElement,
+          priority: 2,
+        };
+      },
+    };
+  }
+
+  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
+    return $createLayoutContainerNode(json.templateColumns);
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  canBeEmpty(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedLayoutContainerNode {
+    return {
+      ...super.exportJSON(),
+      templateColumns: this.__templateColumns,
+      type: 'layout-container',
+      version: 1,
+    };
+  }
+
+  getTemplateColumns(): string {
+    return this.getLatest().__templateColumns;
+  }
+
+  setTemplateColumns(templateColumns: string) {
+    this.getWritable().__templateColumns = templateColumns;
+  }
+}
+
+export function $createLayoutContainerNode(
+  templateColumns: string,
+): LayoutContainerNode {
+  return new LayoutContainerNode(templateColumns);
+}
+
+export function $isLayoutContainerNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutContainerNode {
+  return node instanceof LayoutContainerNode;
+}

package/src/client/components/inputv3/Rte/nodes/LayoutItemNode.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  SerializedElementNode,
+} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {ElementNode} from 'lexical';
+
+export type SerializedLayoutItemNode = SerializedElementNode;
+
+export class LayoutItemNode extends ElementNode {
+  static getType(): string {
+    return 'layout-item';
+  }
+
+  static clone(node: LayoutItemNode): LayoutItemNode {
+    return new LayoutItemNode(node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    if (typeof config.theme.layoutItem === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutItem);
+    }
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {};
+  }
+
+  static importJSON(): LayoutItemNode {
+    return $createLayoutItemNode();
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  exportJSON(): SerializedLayoutItemNode {
+    return {
+      ...super.exportJSON(),
+      type: 'layout-item',
+      version: 1,
+    };
+  }
+}
+
+export function $createLayoutItemNode(): LayoutItemNode {
+  return new LayoutItemNode();
+}
+
+export function $isLayoutItemNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutItemNode {
+  return node instanceof LayoutItemNode;
+}