code block fixes

src/views/edit/editor/elements/CodeBlock.tsx

@@ -11,7 +11,7 @@ import {
 import { CODE_BLOCK_LANGUAGES } from "@udecode/plate-code-block";
 import { Transforms } from "slate";
 
-const languages: { label: string; value: string }[] = [
+const knownLangOptions: { label: string; value: string }[] = [
   { label: "Plain Text", value: "text" },
   ...Object.entries({
     // doesn't include python? But does SVG and GraphQL? WTF?
@@ -23,6 +23,28 @@ const languages: { label: string; value: string }[] = [
   })),
 ];
 
+// Set initial selected language, with some defaults.
+function defaultLang(lang: string | null) {
+  if (!lang) return "text";
+  if (lang === "js") return "javascript";
+  if (lang === "ts") return "typescript";
+
+  // NOTE: If lang is a language not found in Prism / the menus above, it will default to "Plain text"
+  // in the dropdown.
+  return lang;
+}
+
+// On first render, if the language is not in the known options, add it to the list.
+// This is to support unknown languages that are in the underlying markdown, but not known
+// to Prism / language list above; syntax highlighting will not work.
+function amendLanguageOptions(lang: string) {
+  if (!knownLangOptions.find((l) => l.value === lang)) {
+    return [{ label: lang, value: lang }, ...knownLangOptions];
+  }
+
+  return knownLangOptions;
+}
+
 // className -> slate-code_block
 // state -> { className: '', syntax: true }
 // props -> attributes, editor, element
@@ -33,7 +55,7 @@ export const CodeBlockElement = withRef<typeof PlateElement>(
   ({ children, className, ...props }, ref) => {
     const { element } = props;
     const editor = useEditorRef();
-    const [lang, setLang] = React.useState((element.lang as string) || "plain");
+    const [lang, setLang] = React.useState(defaultLang(element.lang as string));
 
     // When the language changes, update S|Plate nodes.
     React.useEffect(() => {
@@ -80,12 +102,14 @@ function LanguageSelect({ lang, setLang }: LangSelectProps) {
   }
 
   const languageOptions = React.useMemo(() => {
+    const languages = amendLanguageOptions(lang);
+
     return languages.map((language) => (
       <option key={language.value} value={language.value}>
         {language.label}
       </option>
     ));
-  }, [languages]);
+  }, []);
 
   return (
     <select value={lang} onChange={onChange} className="bg-muted">

src/views/edit/editor/index.tsx

@@ -342,20 +342,18 @@ export default observer(
     );
 
     return (
-      <>
-        <Plate
-          initialValue={value as any}
-          onChange={setValue}
-          plugins={plugins}
-          readOnly={saving}
-        >
-          <EditorToolbar
-            selectedEditorMode={selectedEditorMode}
-            setSelectedEditorMode={setSelectedEditorMode}
-          />
-          <PlateContent placeholder="Type..." />
-        </Plate>
-      </>
+      <Plate
+        initialValue={value as any}
+        onChange={setValue}
+        plugins={plugins}
+        readOnly={saving}
+      >
+        <EditorToolbar
+          selectedEditorMode={selectedEditorMode}
+          setSelectedEditorMode={setSelectedEditorMode}
+        />
+        <PlateContent placeholder="Type..." />
+      </Plate>
     );
   },
 );

src/views/edit/editor/plugins/createCodeBlockNormalizationPlugin.tsx

@@ -15,60 +15,43 @@ export const createCodeBlockNormalizationPlugin = createPluginFactory({
     // and they do `Editor as any` which seems wrong.
     // Also, `node as any` -- Slate's methods aren't expecting `type` on Node but its foundational
     // to custom elements.
-    const { normalizeNode, insertData } = editor;
-
-    editor.normalizeNode = ([node, path]) => {
-      if (node.type === ELEMENT_CODE_BLOCK) {
-        const blockEntries = Array.from(
-          Editor.nodes(editor as Editor, {
-            at: path,
-            match: (n) => (n as any).type === ELEMENT_CODE_LINE,
-          }),
-        );
-
-        if (blockEntries.length > 1) {
-          const [firstCodeLine, firstCodeLinePath] = blockEntries[0];
-          blockEntries.slice(1).forEach(([, codeLinePath]) => {
-            Transforms.mergeNodes(editor as Editor, { at: codeLinePath });
-          });
-          Transforms.setNodes(
-            editor as Editor,
-            { type: ELEMENT_CODE_BLOCK } as any,
-            { at: firstCodeLinePath },
-          );
-        }
-      }
-      normalizeNode([node, path]);
-    };
+    const { insertData } = editor;
 
     editor.insertData = (data: DataTransfer) => {
       const text = data.getData("text/plain");
       if (
-        text &&
-        Editor.above(editor as Editor, {
+        !text ||
+        !Editor.above(editor as Editor, {
           match: (n: any) => n.type === ELEMENT_CODE_BLOCK,
         })
       ) {
-        const lines = text.split("\n");
-        const { selection } = editor;
-        if (selection && Range.isCollapsed(selection)) {
-          Transforms.insertText(editor as Editor, lines.join("\n"), {
-            at: selection,
-          });
-        } else {
-          lines.forEach((line) => {
-            Transforms.insertText(editor as Editor, line);
-            Transforms.insertNodes(
-              editor as Editor,
-              {
-                type: ELEMENT_CODE_LINE,
-                children: [{ text: "" }],
-              } as any,
-            );
-          });
-        }
+        insertData(data);
         return;
       }
+
+      const lines = text.split("\n");
+      const { selection } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        // When pasting at cursor (no text / blocks selected), insert as a single block.
+        Transforms.insertText(editor as Editor, lines.join("\n"), {
+          at: selection,
+        });
+      } else {
+        // Pasting when selecting multiple lines; if its within a code block, it ends up as one block.
+        // I think Plates createCodeBlockPlugin (from createBasicPlugins) is normalizing this to a single block...
+        // unclear if this code makes sense.
+        lines.forEach((line) => {
+          Transforms.insertText(editor as Editor, line);
+          Transforms.insertNodes(
+            editor as Editor,
+            {
+              type: ELEMENT_CODE_LINE,
+              children: [{ text: "" }],
+            } as any,
+          );
+        });
+      }
+
       insertData(data);
     };
 

src/views/edit/index.tsx

@@ -279,7 +279,8 @@ const DocumentEditView = observer((props: DocumentEditProps) => {
   // flexGrows are needed so save / edit buttons are at bottom on both empty documents
   // and scrollable documents
   return (
-    <Pane flexGrow={1} display="flex" flexDirection="column">
+    // NOTE: width: 100% prevents child code_blocks (and maybe others) from overflowing
+    <Pane flexGrow={1} display="flex" flexDirection="column" width="100%">
       <div style={{ marginBottom: "24px" }}>
         <a
           onClick={goBack}