style: issue details page, feat: add to cycles

components/lexical/plugins/code-highlight.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { registerCodeHighlighting } from "@lexical/code";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export const CodeHighlightPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+};

components/lexical/plugins/read-only.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { getValidatedValue } from "../helpers/editor";
+
+const ReadOnlyPlugin = ({ value }: { value: string }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (editor && value) {
+      const initialEditorState = editor?.parseEditorState(
+        getValidatedValue(value) || ""
+      );
+      editor.setEditorState(initialEditorState);
+    }
+  }, [editor, value]);
+
+  return <></>;
+};
+
+export default ReadOnlyPlugin;