@collabchron/notiq 0.2.0 → 1.0.0

package/src/components/editor/nodes/InlineImageNode/InlineImageNode.css

@@ -1,94 +0,0 @@
-/**
- * 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/components/editor/nodes/InlineImageNode/InlineImageNode.tsx

@@ -1,309 +0,0 @@
-/**
- * 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,
-  LexicalUpdateJSON,
-  NodeKey,
-  SerializedEditor,
-  SerializedLexicalNode,
-  Spread,
-} from 'lexical';
-import type {JSX} from 'react';
-
-import {
-  addClassNamesToElement,
-  removeClassNamesFromElement,
-} from '@lexical/utils';
-import {
-  $applyNodeReplacement,
-  createEditor,
-  DecoratorNode,
-  isHTMLElement,
-} from 'lexical';
-import * as React 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 (isHTMLElement(domNode) && domNode.nodeName === 'IMG') {
-    const {alt: altText, src, width, height} = domNode as HTMLImageElement;
-    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
->;
-
-function getPositionClass(position: Position | undefined): string | undefined {
-  return typeof position === 'string' ? `position-${position}` : undefined;
-}
-
-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, src, showCaption, position} = serializedNode;
-    return $createInlineImageNode({
-      altText,
-      height,
-      position,
-      showCaption,
-      src,
-      width,
-    }).updateFromJSON(serializedNode);
-  }
-
-  updateFromJSON(
-    serializedNode: LexicalUpdateJSON<SerializedInlineImageNode>,
-  ): this {
-    const {caption} = serializedNode;
-    const node = super.updateFromJSON(serializedNode);
-    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 {
-      ...super.exportJSON(),
-      altText: this.getAltText(),
-      caption: this.__caption.toJSON(),
-      height: this.__height === 'inherit' ? 0 : this.__height,
-      position: this.__position,
-      showCaption: this.__showCaption,
-      src: this.getSrc(),
-      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');
-    for (const cls of [
-      config.theme.inlineImage,
-      getPositionClass(this.__position),
-    ]) {
-      if (cls) {
-        addClassNamesToElement(span, cls);
-      }
-    }
-    return span;
-  }
-
-  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): false {
-    const position = this.__position;
-    if (position !== prevNode.__position) {
-      removeClassNamesFromElement(dom, getPositionClass(prevNode.__position));
-      addClassNamesToElement(dom, getPositionClass(position));
-    }
-    return false;
-  }
-
-  decorate(): JSX.Element {
-    return (
-      <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}
-      />
-    );
-  }
-}
-
-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/components/editor/nodes/LayoutNode/LayoutContainerNode.ts

@@ -1,146 +0,0 @@
-/**
- * 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,
-    LexicalUpdateJSON,
-    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: this, 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().updateFromJSON(json);
-    }
-  
-    updateFromJSON(
-      serializedNode: LexicalUpdateJSON<SerializedLayoutContainerNode>,
-    ): this {
-      return super
-        .updateFromJSON(serializedNode)
-        .setTemplateColumns(serializedNode.templateColumns);
-    }
-  
-    isShadowRoot(): boolean {
-      return true;
-    }
-  
-    canBeEmpty(): boolean {
-      return false;
-    }
-  
-    exportJSON(): SerializedLayoutContainerNode {
-      return {
-        ...super.exportJSON(),
-        templateColumns: this.__templateColumns,
-      };
-    }
-  
-    getTemplateColumns(): string {
-      return this.getLatest().__templateColumns;
-    }
-  
-    setTemplateColumns(templateColumns: string): this {
-      const self = this.getWritable();
-      self.__templateColumns = templateColumns;
-      return self;
-    }
-  }
-  
-  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/components/editor/nodes/LayoutNode/LayoutItemNode.ts

@@ -1,79 +0,0 @@
-/**
- * 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,
-    EditorConfig,
-    LexicalNode,
-    SerializedElementNode,
-  } from 'lexical';
-  
-  import {addClassNamesToElement} from '@lexical/utils';
-  import {ElementNode} from 'lexical';
-  
-  export type SerializedLayoutItemNode = SerializedElementNode;
-  
-  function $convertLayoutItemElement(): DOMConversionOutput | null {
-    return {node: $createLayoutItemNode()};
-  }
-  
-  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');
-      dom.setAttribute('data-lexical-layout-item', 'true');
-      if (typeof config.theme.layoutItem === 'string') {
-        addClassNamesToElement(dom, config.theme.layoutItem);
-      }
-      return dom;
-    }
-  
-    updateDOM(): boolean {
-      return false;
-    }
-  
-    static importDOM(): DOMConversionMap | null {
-      return {
-        div: (domNode: HTMLElement) => {
-          if (!domNode.hasAttribute('data-lexical-layout-item')) {
-            return null;
-          }
-          return {
-            conversion: $convertLayoutItemElement,
-            priority: 2,
-          };
-        },
-      };
-    }
-  
-    static importJSON(serializedNode: SerializedLayoutItemNode): LayoutItemNode {
-      return $createLayoutItemNode().updateFromJSON(serializedNode);
-    }
-  
-    isShadowRoot(): boolean {
-      return true;
-    }
-  }
-  
-  export function $createLayoutItemNode(): LayoutItemNode {
-    return new LayoutItemNode();
-  }
-  
-  export function $isLayoutItemNode(
-    node: LexicalNode | null | undefined,
-  ): node is LayoutItemNode {
-    return node instanceof LayoutItemNode;
-  }