@collabchron/notiq 0.2.0

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

@@ -0,0 +1,204 @@
+import {
+  DecoratorNode,
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from "lexical";
+import * as React from "react";
+import { Suspense } from "react";
+
+export type Options = ReadonlyArray<Option>;
+
+export type Option = Readonly<{
+  text: string;
+  uid: string;
+  votes: Array<string>;
+}>;
+
+const PollComponent = React.lazy(
+  () => import("@/components/ui/poll/poll-component")
+);
+
+function createUID(): string {
+  return Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, "")
+    .substr(0, 5);
+}
+
+export function createPollOption(text = ""): Option {
+  return {
+    text,
+    uid: createUID(),
+    votes: [],
+  };
+}
+
+function cloneOption(
+  option: Option,
+  text: string,
+  votes?: Array<string>
+): Option {
+  return {
+    text,
+    uid: option.uid,
+    votes: votes || Array.from(option.votes),
+  };
+}
+
+export type SerializedPollNode = Spread<
+  {
+    question: string;
+    options: Options;
+  },
+  SerializedLexicalNode
+>;
+
+function $convertPollElement(domNode: HTMLElement): DOMConversionOutput | null {
+  const question = domNode.getAttribute("data-lexical-poll-question");
+  const options = domNode.getAttribute("data-lexical-poll-options");
+  if (question !== null && options !== null) {
+    const node = $createPollNode(question, JSON.parse(options));
+    return { node };
+  }
+  return null;
+}
+
+export class PollNode extends DecoratorNode<React.JSX.Element> {
+  __question: string;
+  __options: Options;
+
+  static getType(): string {
+    return "poll";
+  }
+
+  static clone(node: PollNode): PollNode {
+    return new PollNode(node.__question, node.__options, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedPollNode): PollNode {
+    return $createPollNode(
+      serializedNode.question,
+      serializedNode.options
+    ).updateFromJSON(serializedNode);
+  }
+
+  constructor(question: string, options: Options, key?: NodeKey) {
+    super(key);
+    this.__question = question;
+    this.__options = options;
+  }
+
+  exportJSON(): SerializedPollNode {
+    return {
+      ...super.exportJSON(),
+      options: this.__options,
+      question: this.__question,
+    };
+  }
+
+  setQuestion(newQuestion: string): void {
+    const self = this.getWritable();
+    self.__question = newQuestion;
+  }
+
+  addOption(option: Option): void {
+    const self = this.getWritable();
+    const options = Array.from(self.__options);
+    options.push(option);
+    self.__options = options;
+  }
+
+  deleteOption(option: Option): void {
+    const self = this.getWritable();
+    const options = Array.from(self.__options);
+    const index = options.indexOf(option);
+    options.splice(index, 1);
+    self.__options = options;
+  }
+
+  setOptionText(option: Option, text: string): void {
+    const self = this.getWritable();
+    const clonedOption = cloneOption(option, text);
+    const options = Array.from(self.__options);
+    const index = options.indexOf(option);
+    options[index] = clonedOption;
+    self.__options = options;
+  }
+
+  toggleVote(option: Option, clientID: string): void {
+    const self = this.getWritable();
+    const newOptions = self.__options.map((opt) => {
+      if (opt.uid === option.uid) {
+        const newVotes = opt.votes.includes(clientID)
+          ? opt.votes.filter((id) => id !== clientID)
+          : [...opt.votes, clientID];
+        return { ...opt, votes: newVotes };
+      }
+      return { ...opt };
+    });
+
+    self.__options = newOptions;
+    this.markDirty();
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute("data-lexical-poll-question")) {
+          return null;
+        }
+        return {
+          conversion: $convertPollElement,
+          priority: 2,
+        };
+      },
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("span");
+    element.setAttribute("data-lexical-poll-question", this.__question);
+    element.setAttribute(
+      "data-lexical-poll-options",
+      JSON.stringify(this.__options)
+    );
+    return { element };
+  }
+
+  createDOM(): HTMLElement {
+    const elem = document.createElement("span");
+    elem.style.display = "inline-block";
+    return elem;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <PollComponent
+          question={this.__question}
+          options={this.__options}
+          nodeKey={this.__key}
+        />
+      </Suspense>
+    );
+  }
+}
+
+export function $createPollNode(question: string, options: Options): PollNode {
+  return new PollNode(question, options);
+}
+
+export function $isPollNode(
+  node: LexicalNode | null | undefined
+): node is PollNode {
+  return node instanceof PollNode;
+}

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

@@ -0,0 +1,260 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  SerializedLexicalNode,
+  SerializedEditor,
+  Spread,
+  DecoratorNode,
+  NodeKey,
+  LexicalNode,
+  createEditor,
+  LexicalCommand,
+  createCommand,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  LexicalEditor,
+  EditorState,
+} from "lexical";
+import React, { Suspense, useEffect } from "react";
+const StepperComponent = React.lazy(
+  () => import("@/components/ui/stepper/stepper")
+);
+
+export interface StepType {
+  title: string;
+  id: number;
+  content: LexicalEditor;
+}
+
+export type StepsType = StepType[];
+
+export type SerializedStepper = Spread<
+  {
+    type: "stepper";
+    steps: {
+      title: string;
+      id: string;
+      content: SerializedEditor;
+    }[];
+  },
+  SerializedLexicalNode
+>;
+
+export const initialEditorState = {
+  root: {
+    children: [
+      {
+        children: [
+          {
+            detail: 0,
+            format: 0,
+            mode: "normal",
+            style: "",
+            text: "type the content here..",
+            type: "text",
+            version: 1,
+          },
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "paragraph",
+        version: 1,
+        textFormat: 0,
+        textStyle: "",
+      },
+    ],
+    direction: null,
+    format: "",
+    indent: 0,
+    type: "root",
+    version: 1,
+  },
+};
+
+export class StepperNode extends DecoratorNode<React.ReactElement> {
+  __steps: StepsType;
+
+  constructor(steps: StepsType, key?: NodeKey) {
+    super(key);
+    this.__steps = steps.map((step) => {
+      if (!step.content) {
+        const newEditor = createEditor();
+        const parsedEditorState = newEditor.parseEditorState(
+          JSON.stringify(initialEditorState)
+        );
+        newEditor.setEditorState(parsedEditorState);
+        return { ...step, content: newEditor };
+      }
+      return step;
+    });
+  }
+
+  static getType(): string {
+    return "stepper";
+  }
+
+  addStep(step: Omit<StepType, "content">) {
+    const self = this.getWritable();
+    const newEditor = createEditor();
+    const parsedEditorState = newEditor.parseEditorState(
+      JSON.stringify(initialEditorState)
+    );
+    newEditor.setEditorState(parsedEditorState);
+    const newStep: StepType = {
+      ...step,
+      content: newEditor,
+    };
+    self.__steps.push(newStep);
+    return self;
+  }
+
+  insertStepAtIndex(step: Omit<StepType, "content">, index: number) {
+    if (index < 0 || index > this.__steps.length) {
+      throw new Error("Invalid index for inserting step.");
+    }
+    const self = this.getWritable();
+    const newEditor = createEditor();
+    const parsedEditorState = newEditor.parseEditorState(
+      JSON.stringify(initialEditorState)
+    );
+    newEditor.setEditorState(parsedEditorState);
+    const newStep: StepType = {
+      ...step,
+      content: newEditor,
+    };
+    self.__steps.splice(index, 0, newStep);
+    return self;
+  }
+  deleteStep(id: number) {
+    const self = this.getWritable();
+    self.__steps = self.__steps.filter(step => step.id !== id);
+    return self;
+  }
+  updateTitle(id: number, title: string) {
+    const self = this.getWritable();
+    const step = self.__steps.find(s => s.id === id);
+    if (step) step.title = title;
+    return self;
+  }
+  
+  
+  replaceSteps(steps: StepsType) {
+    const self = this.getWritable();
+    self.__steps = steps.map((step) => {
+      if (step.content) return step;
+      const newEditor = createEditor();
+      const parsedEditorState = newEditor.parseEditorState(
+        JSON.stringify(initialEditorState)
+      );
+      newEditor.setEditorState(parsedEditorState);
+      return { ...step, content: newEditor };
+    });
+    return self;
+  }
+
+  reorderSteps(newSteps: StepsType) {
+    const self = this.getWritable();
+    self.__steps = newSteps;
+    return self;
+  }
+
+
+  static clone(node: StepperNode): StepperNode {
+    return new StepperNode(node.__steps, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedStepper): StepperNode {
+    const steps: StepType[] = serializedNode.steps.map((serializedStep) => {
+      const newEditor = createEditor();
+      const editorState = newEditor.parseEditorState(
+        serializedStep.content.editorState
+      );
+      newEditor.setEditorState(editorState);
+      return {
+        title: serializedStep.title,
+        id: parseInt(serializedStep.id, 10),
+        content: newEditor,
+      };
+    });
+    return new StepperNode(steps);
+  }
+
+  exportJSON(): SerializedStepper {
+    return {
+      ...super.exportJSON(),
+      steps: this.__steps.map((step) => ({
+        title: step.title,
+        id: step.id.toString(),
+        content: {
+          editorState: step.content.getEditorState().toJSON(),
+        },
+      })),
+      type: "stepper",
+    };
+  }
+
+  createDOM(): HTMLElement {
+    const element = document.createElement("div");
+    element.className = `stepper-${this.__type}`;
+    return element;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  decorate(): React.ReactElement {
+    return (
+      <Suspense fallback={null}>
+        <div>
+          <StepperComponent steps={this.__steps} nodeKey={this.getKey()} />
+        </div>
+      </Suspense>
+    );
+  }
+}
+
+export function $isStepperNode(
+  node: LexicalNode | null | undefined
+): node is StepperNode {
+  return node instanceof StepperNode;
+}
+
+export function $createStepperNode(steps: StepsType): StepperNode {
+  return new StepperNode(steps);
+}
+
+export const INSERT_STEPPER_COMMAND: LexicalCommand<StepsType> =
+  createCommand();
+
+export function $insertStepperNode(steps: StepsType) {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    const stepperNode = $createStepperNode(steps);
+    selection.insertNodes([stepperNode]);
+  }
+}
+
+export default function StepperPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([StepperNode])) {
+      throw new Error("StepperNode: StepperNode not registered on editor");
+    }
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_STEPPER_COMMAND,
+      (payload: StepsType) => {
+        editor.update(() => {
+          $insertStepperNode(payload);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor]);
+
+  return null;
+}

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

@@ -0,0 +1,214 @@
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from "lexical";
+
+import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents";
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from "@lexical/react/LexicalDecoratorBlockNode";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const WIDGET_SCRIPT_URL = "https://platform.twitter.com/widgets.js";
+
+type TweetComponentProps = Readonly<{
+  className: Readonly<{
+    base: string;
+    focus: string;
+  }>;
+  format: ElementFormatType | null;
+  loadingComponent?: React.JSX.Element | string;
+  nodeKey: NodeKey;
+  onError?: (error: string) => void;
+  onLoad?: () => void;
+  tweetID: string;
+}>;
+
+function $convertTweetElement(
+  domNode: HTMLDivElement
+): DOMConversionOutput | null {
+  const id = domNode.getAttribute("data-lexical-tweet-id");
+  if (id) {
+    const node = $createTweetNode(id);
+    return { node };
+  }
+  return null;
+}
+
+let isTwitterScriptLoading = true;
+
+function TweetComponent({
+  className,
+  format,
+  nodeKey,
+  onError,
+  onLoad,
+  tweetID,
+}: TweetComponentProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const previousTweetIDRef = useRef<string>("");
+  const [isTweetLoading, setIsTweetLoading] = useState(false);
+
+  const createTweet = useCallback(async () => {
+    try {
+      // @ts-expect-error Twitter is attached to the window.
+      await window.twttr.widgets.createTweet(tweetID, containerRef.current);
+
+      setIsTweetLoading(false);
+      isTwitterScriptLoading = false;
+
+      if (onLoad) {
+        onLoad();
+      }
+    } catch (error) {
+      if (onError) {
+        onError(String(error));
+      }
+    }
+  }, [onError, onLoad, tweetID]);
+
+  useEffect(() => {
+    if (tweetID !== previousTweetIDRef.current) {
+      setIsTweetLoading(true);
+
+      if (isTwitterScriptLoading) {
+        const script = document.createElement("script");
+        script.src = WIDGET_SCRIPT_URL;
+        script.async = true;
+        document.body?.appendChild(script);
+        script.onload = createTweet;
+        if (onError) {
+          script.onerror = onError as OnErrorEventHandler;
+        }
+      } else {
+        createTweet();
+      }
+
+      if (previousTweetIDRef) {
+        previousTweetIDRef.current = tweetID;
+      }
+    }
+  }, [createTweet, onError, tweetID]);
+
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}
+    >
+      {isTweetLoading ? (
+        <Skeleton className="max-h-[200px] w-full h-full max-w-[400px]" />
+      ) : null}
+      <div
+        style={{ 
+          display: "inline-block", 
+          width: "100%",
+         }}
+        ref={containerRef}
+      />
+    </BlockWithAlignableContents>
+  );
+}
+
+export type SerializedTweetNode = Spread<
+  {
+    id: string;
+  },
+  SerializedDecoratorBlockNode
+>;
+
+export class TweetNode extends DecoratorBlockNode {
+  __id: string;
+
+  static getType(): string {
+    return "tweet";
+  }
+
+  static clone(node: TweetNode): TweetNode {
+    return new TweetNode(node.__id, node.__format, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedTweetNode): TweetNode {
+    return $createTweetNode(serializedNode.id).updateFromJSON(serializedNode);
+  }
+
+  exportJSON(): SerializedTweetNode {
+    return {
+      ...super.exportJSON(),
+      id: this.getId(),
+    };
+  }
+
+  static importDOM(): DOMConversionMap<HTMLDivElement> | null {
+    return {
+      div: (domNode: HTMLDivElement) => {
+        if (!domNode.hasAttribute("data-lexical-tweet-id")) {
+          return null;
+        }
+        return {
+          conversion: $convertTweetElement,
+          priority: 2,
+        };
+      },
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("div");
+    element.setAttribute("data-lexical-tweet-id", this.__id);
+    const text = document.createTextNode(this.getTextContent());
+    element.append(text);
+    return { element };
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key);
+    this.__id = id;
+  }
+
+  getId(): string {
+    return this.__id;
+  }
+
+  getTextContent(): string {
+    return `https://x.com/i/web/status/${this.__id}`;
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): React.JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    const className = {
+      base: embedBlockTheme.base || "",
+      focus: embedBlockTheme.focus || "",
+    };
+    return (
+      <TweetComponent
+        className={className}
+        format={this.__format}
+        loadingComponent="Loading..."
+        nodeKey={this.getKey()}
+        tweetID={this.__id}
+      />
+    );
+  }
+}
+
+export function $createTweetNode(tweetID: string): TweetNode {
+  return new TweetNode(tweetID);
+}
+
+export function $isTweetNode(
+  node: TweetNode | LexicalNode | null | undefined
+): node is TweetNode {
+  return node instanceof TweetNode;
+}