@collabchron/notiq 0.2.0

package/src/components/editor/nodes/ExcalidrawNode/index.tsx

@@ -0,0 +1,204 @@
+/**
+ * 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,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+import type {JSX} from 'react';
+
+import {DecoratorNode} from 'lexical';
+import * as React from 'react';
+
+type Dimension = number | 'inherit';
+
+const ExcalidrawComponent = React.lazy(() => import('./ExcalidrawComponent'));
+
+export type SerializedExcalidrawNode = Spread<
+  {
+    data: string;
+    width?: Dimension;
+    height?: Dimension;
+  },
+  SerializedLexicalNode
+>;
+
+function $convertExcalidrawElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const excalidrawData = domNode.getAttribute('data-lexical-excalidraw-json');
+  const styleAttributes = window.getComputedStyle(domNode);
+  const heightStr = styleAttributes.getPropertyValue('height');
+  const widthStr = styleAttributes.getPropertyValue('width');
+  const height =
+    !heightStr || heightStr === 'inherit' ? 'inherit' : parseInt(heightStr, 10);
+  const width =
+    !widthStr || widthStr === 'inherit' ? 'inherit' : parseInt(widthStr, 10);
+
+  if (excalidrawData) {
+    const node = $createExcalidrawNode(excalidrawData, width, height);
+    return {
+      node,
+    };
+  }
+  return null;
+}
+
+export class ExcalidrawNode extends DecoratorNode<JSX.Element> {
+  __data: string;
+  __width: Dimension;
+  __height: Dimension;
+
+  static getType(): string {
+    return 'excalidraw';
+  }
+
+  static clone(node: ExcalidrawNode): ExcalidrawNode {
+    return new ExcalidrawNode(
+      node.__data,
+      node.__width,
+      node.__height,
+      node.__key,
+    );
+  }
+
+  static importJSON(serializedNode: SerializedExcalidrawNode): ExcalidrawNode {
+    return new ExcalidrawNode(
+      serializedNode.data,
+      serializedNode.width ?? 'inherit',
+      serializedNode.height ?? 'inherit',
+    ).updateFromJSON(serializedNode);
+  }
+
+  exportJSON(): SerializedExcalidrawNode {
+    return {
+      ...super.exportJSON(),
+      data: this.__data,
+      height: this.__height === 'inherit' ? undefined : this.__height,
+      width: this.__width === 'inherit' ? undefined : this.__width,
+    };
+  }
+
+  constructor(
+    data = '[]',
+    width: Dimension = 'inherit',
+    height: Dimension = 'inherit',
+    key?: NodeKey,
+  ) {
+    super(key);
+    this.__data = data;
+    this.__width = width;
+    this.__height = height;
+  }
+
+  // View
+  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;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap<HTMLSpanElement> | null {
+    return {
+      span: (domNode: HTMLSpanElement) => {
+        if (!domNode.hasAttribute('data-lexical-excalidraw-json')) {
+          return null;
+        }
+        return {
+          conversion: $convertExcalidrawElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const element = document.createElement('span');
+
+    element.style.display = 'inline-block';
+
+    const content = editor.getElementByKey(this.getKey());
+    if (content !== null) {
+      const svg = content.querySelector('svg');
+      if (svg !== null) {
+        element.innerHTML = svg.outerHTML;
+      }
+    }
+
+    element.style.width =
+      this.__width === 'inherit' ? 'inherit' : `${this.__width}px`;
+    element.style.height =
+      this.__height === 'inherit' ? 'inherit' : `${this.__height}px`;
+
+    element.setAttribute('data-lexical-excalidraw-json', this.__data);
+    return {element};
+  }
+
+  setData(data: string): void {
+    const self = this.getWritable();
+    self.__data = data;
+  }
+
+  getWidth(): Dimension {
+    return this.getLatest().__width;
+  }
+
+  setWidth(width: Dimension): void {
+    const self = this.getWritable();
+    self.__width = width;
+  }
+
+  getHeight(): Dimension {
+    return this.getLatest().__height;
+  }
+
+  setHeight(height: Dimension): void {
+    const self = this.getWritable();
+    self.__height = height;
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    return (
+      <ExcalidrawComponent
+        nodeKey={this.getKey()}
+        data={this.__data}
+        width={this.__width}
+        height={this.__height}
+      />
+    );
+  }
+}
+
+export function $createExcalidrawNode(
+  data: string = '[]',
+  width: Dimension = 'inherit',
+  height: Dimension = 'inherit',
+): ExcalidrawNode {
+  return new ExcalidrawNode(data, width, height);
+}
+
+export function $isExcalidrawNode(
+  node: LexicalNode | null | undefined,
+): node is ExcalidrawNode {
+  return node instanceof ExcalidrawNode;
+}

package/src/components/editor/nodes/FigmaNode/FigmaNode.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from 'lexical';
+import type {JSX} from 'react';
+
+import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from '@lexical/react/LexicalDecoratorBlockNode';
+import * as React from 'react';
+
+type FigmaComponentProps = Readonly<{
+  className: Readonly<{
+    base: string;
+    focus: string;
+  }>;
+  format: ElementFormatType | null;
+  nodeKey: NodeKey;
+  documentID: string;
+}>;
+
+function FigmaComponent({
+  className,
+  format,
+  nodeKey,
+  documentID,
+}: FigmaComponentProps) {
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}>
+      <iframe
+        width="560"
+        height="315"
+        src={`https://www.figma.com/embed?embed_host=lexical&url=\
+        https://www.figma.com/file/${documentID}`}
+        allowFullScreen={true}
+      />
+    </BlockWithAlignableContents>
+  );
+}
+
+export type SerializedFigmaNode = Spread<
+  {
+    documentID: string;
+  },
+  SerializedDecoratorBlockNode
+>;
+
+export class FigmaNode extends DecoratorBlockNode {
+  __id: string;
+
+  static getType(): string {
+    return 'figma';
+  }
+
+  static clone(node: FigmaNode): FigmaNode {
+    return new FigmaNode(node.__id, node.__format, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedFigmaNode): FigmaNode {
+    return $createFigmaNode(serializedNode.documentID).updateFromJSON(
+      serializedNode,
+    );
+  }
+
+  exportJSON(): SerializedFigmaNode {
+    return {
+      ...super.exportJSON(),
+      documentID: this.__id,
+    };
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key);
+    this.__id = id;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  getId(): string {
+    return this.__id;
+  }
+
+  getTextContent(
+    _includeInert?: boolean | undefined,
+    _includeDirectionless?: false | undefined,
+  ): string {
+    return `https://www.figma.com/file/${this.__id}`;
+  }
+
+  decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    const className = {
+      base: embedBlockTheme.base || '',
+      focus: embedBlockTheme.focus || '',
+    };
+    return (
+      <FigmaComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        documentID={this.__id}
+      />
+    );
+  }
+}
+
+export function $createFigmaNode(documentID: string): FigmaNode {
+  return new FigmaNode(documentID);
+}
+
+export function $isFigmaNode(
+  node: FigmaNode | LexicalNode | null | undefined,
+): node is FigmaNode {
+  return node instanceof FigmaNode;
+}

package/src/components/editor/nodes/Hint/HintComponet.tsx

@@ -0,0 +1,221 @@
+"use client";
+import { $getNodeByKey, LexicalEditor, NodeKey } from "lexical";
+import React from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { cva } from "class-variance-authority";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { $isHintNode, HintType } from ".";
+
+const hintVariants = cva(
+  "hint p-4 max-sm:p-2 transition-colors   my-2 flex flex-row max-sm:flex-col items-start relative   justify-between rounded-md straight-corners:rounded-none w-full text-destructive-foreground  shadow-xl mx-auto max-w-3xl",
+  {
+    variants: {
+      variant: {
+        default:
+          "border border-border/20 dark:bg-black bg-white text-foreground",
+        success:
+          "dark:bg-green-500/20 bg-green-500/70 dark:shadow-green-800/10 shadow-green-500/30 border-green-500/40 decoration-primary/60",
+
+        error:
+          "destructive  border-destructive  dark:shadow-red-800/20 shadow-red-500/30 bg-destructive ",
+        warning:
+          "bg-yellow-500/50 dark:shadow-yellow-500/10 shadow-yellow-500/20   border-yellow-500/40",
+        info: "bg-blue-500/50 shadow-blue-500/10  bg-blue-700/70  shadow-blue-700/20   border-blue-500/40",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+
+export default function HintComponent({
+  type,
+  captionEditor,
+  nodeKey,
+}: {
+  type: HintType;
+  captionEditor: LexicalEditor;
+  nodeKey: NodeKey;
+}) {
+  const [editor] = useLexicalComposerContext();
+
+  const variantMap: any = {
+    hint: "success",
+    warning: "warning",
+    info: "info",
+    error: "error",
+    success: "success",
+  };
+
+  const variant = variantMap[type] || "default";
+
+  const variantOrder: HintType[] = [
+    "success",
+    "warning",
+    "info",
+    "error",
+    "hint",
+  ];
+
+  function handleIcon(type: HintType) {
+    switch (type) {
+      case "hint":
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 36 36"
+          >
+            <path
+              fill="currentColor"
+              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2m0 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14"
+              className="clr-i-outline clr-i-outline-path-1"
+            ></path>
+            <path
+              fill="currentColor"
+              d="M28 12.1a1 1 0 0 0-1.41 0l-11.1 11.05l-6-6A1 1 0 0 0 8 18.53L15.49 26L28 13.52a1 1 0 0 0 0-1.42"
+              className="clr-i-outline clr-i-outline-path-2"
+            ></path>
+            <path fill="none" d="M0 0h36v36H0z"></path>
+          </svg>
+        );
+      case "warning":
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M4.126 20q-.234 0-.414-.111t-.28-.293q-.108-.179-.12-.387q-.01-.209.118-.421L11.3 5.212q.128-.212.308-.308T12 4.808t.391.096t.308.308l7.871 13.576q.128.212.117.42q-.01.21-.12.388q-.1.182-.28.293t-.413.111zm.324-1h15.1L12 6zM12 17.616q.262 0 .439-.177t.176-.439t-.177-.438t-.438-.178t-.438.177t-.177.439t.177.439t.438.177m0-2.231q.214 0 .357-.144t.143-.356v-4q0-.213-.144-.357t-.357-.143t-.356.143t-.143.357v4q0 .212.144.356t.357.144M12 12.5"
+            ></path>
+          </svg>
+        );
+      case "info":
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 24 24"
+          >
+            <g fill="none" stroke="currentColor" strokeLinejoin="round">
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+                strokeLinecap="round"
+                strokeWidth="1.5"
+              ></circle>
+              <path strokeWidth="2.25" d="M12 8h.01v.01H12z"></path>
+              <path strokeLinecap="round" strokeWidth="1.5" d="M12 12v4"></path>
+            </g>
+          </svg>
+        );
+
+      case "error":
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 512 512"
+          >
+            <path
+              fill="currentColor"
+              fillRule="evenodd"
+              d="M256 42.667c117.803 0 213.334 95.53 213.334 213.333S373.803 469.334 256 469.334S42.667 373.803 42.667 256S138.197 42.667 256 42.667m0 42.667c-94.1 0-170.666 76.565-170.666 170.666c0 94.102 76.565 170.667 170.666 170.667c94.102 0 170.667-76.565 170.667-170.667c0-94.101-76.565-170.666-170.667-170.666m48.918 91.584l30.165 30.165L286.166 256l48.917 48.918l-30.165 30.165L256 286.166l-48.917 48.917l-30.165-30.165L225.835 256l-48.917-48.917l30.165-30.165L256 225.835z"
+            ></path>
+          </svg>
+        );
+      case "success":
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            height="1.5em"
+            viewBox="0 0 36 36"
+          >
+            <path
+              fill="currentColor"
+              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2m0 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14"
+              className="clr-i-outline clr-i-outline-path-1"
+            ></path>
+            <path
+              fill="currentColor"
+              d="M28 12.1a1 1 0 0 0-1.41 0l-11.1 11.05l-6-6A1 1 0 0 0 8 18.53L15.49 26L28 13.52a1 1 0 0 0 0-1.42"
+              className="clr-i-outline clr-i-outline-path-2"
+            ></path>
+            <path fill="none" d="M0 0h36v36H0z"></path>
+          </svg>
+        );
+    }
+  }
+
+  function handleVariantChange() {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isHintNode(node)) {
+        const currentVariant = node.__variant;
+        const currentIndex = variantOrder.indexOf(currentVariant);
+        const nextIndex = (currentIndex + 1) % variantOrder.length;
+        const nextVariant = variantOrder[nextIndex];
+
+        node.setVariant(nextVariant);
+      }
+    });
+  }
+
+
+
+  return (
+    <div className={hintVariants({ variant })}>
+      <button
+        type="button"
+        disabled={!editor.isEditable()}
+        onClick={handleVariantChange}
+        className="cursor-pointer max-sm:mb-1 ml-2"
+      >
+        {handleIcon(variant)}
+      </button>
+      <LexicalNestedComposer initialEditor={captionEditor}>
+        <HistoryPlugin />
+        <PlainTextPlugin
+          contentEditable={
+            <ContentEditable
+              className="
+                    flex-1 ml-3
+                    border-0 resize-none cursor-text
+                    block  relative outline-none   select-text
+                    whitespace-pre-wrap break-words
+                "
+              aria-placeholder={"Write hint caption"}
+              contentEditable={editor.isEditable()}
+              aria-disabled={true}
+              placeholder={
+                <div
+                  className="  
+                    text-base text-[#999] overflow-hidden absolute top-[17px] left-[55px]  
+                    select-none text-nowrap inline-block text-ellipsis pointer-events-none
+                  "
+                >
+                  Write your note
+                </div>
+              }
+            />
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+      </LexicalNestedComposer>
+    </div>
+  );
+}