refactor: table plugin

src/components/SlateEditor/helpers.ts

@@ -28,7 +28,7 @@ import { REPHRASE_ELEMENT_TYPE } from "./plugins/rephrase/rephraseTypes";
 import { PITCH_ELEMENT_TYPE } from "./plugins/pitch/types";
 import { RELATED_ELEMENT_TYPE } from "./plugins/related/types";
 import { SPAN_ELEMENT_TYPE } from "./plugins/span/types";
-import { TYPE_TABLE } from "./plugins/table/types";
+import { TABLE_ELEMENT_TYPE } from "./plugins/table/types";
 import { BRIGHTCOVE_ELEMENT_TYPE } from "./plugins/video/types";
 import { SYMBOL_ELEMENT_TYPE } from "./plugins/symbol/types";
 
@@ -57,7 +57,7 @@ export const blocks: ElementType[] = [
   IMAGE_ELEMENT_TYPE,
   FILE_ELEMENT_TYPE,
   RELATED_ELEMENT_TYPE,
-  TYPE_TABLE,
+  TABLE_ELEMENT_TYPE,
   PITCH_ELEMENT_TYPE,
   GRID_ELEMENT_TYPE,
   KEY_FIGURE_ELEMENT_TYPE,

src/components/SlateEditor/plugins/DND/index.ts

@@ -9,13 +9,16 @@
 import { DragEventHandler } from "react";
 import { Editor, Element, Node, Text } from "slate";
 import { ReactEditor } from "slate-react";
+import {
+  HEADING_ELEMENT_TYPE,
+  LIST_ELEMENT_TYPE,
+  LIST_ITEM_ELEMENT_TYPE,
+  PARAGRAPH_ELEMENT_TYPE,
+  SECTION_ELEMENT_TYPE,
+} from "@ndla/editor";
 import onDrop from "./onDrop";
 import { getTopNode } from "./utils";
-import { TYPE_HEADING } from "../heading/types";
-import { TYPE_LIST, TYPE_LIST_ITEM } from "../list/types";
-import { TYPE_PARAGRAPH } from "../paragraph/types";
-import { TYPE_SECTION } from "../section/types";
-import { TYPE_TABLE_CAPTION } from "../table/types";
+import { TABLE_CAPTION_ELEMENT_TYPE } from "../table/types";
 import { BLOCK_QUOTE_ELEMENT_TYPE } from "../blockquote/blockquoteTypes";
 
 const onDragOver = (): DragEventHandler<HTMLDivElement> => (event) => {
@@ -44,25 +47,30 @@ const dndPlugin = (editor: Editor) => {
       const fragment = Node.fragment(editor, selection);
       const section = fragment[0];
 
-      if (Element.isElement(section) && section.type === TYPE_SECTION) {
+      if (Element.isElement(section) && section.type === SECTION_ELEMENT_TYPE) {
         const lowestCommonAncestor = [...Node.nodes(section)].find(([element]) => {
           return (
             Element.isElement(element) &&
             (element.children.length > 1 ||
-              [TYPE_HEADING, TYPE_PARAGRAPH, BLOCK_QUOTE_ELEMENT_TYPE, TYPE_TABLE_CAPTION].includes(element.type))
+              [
+                HEADING_ELEMENT_TYPE,
+                PARAGRAPH_ELEMENT_TYPE,
+                BLOCK_QUOTE_ELEMENT_TYPE,
+                TABLE_CAPTION_ELEMENT_TYPE,
+              ].includes(element.type))
           );
         })?.[0];
         if (Element.isElement(lowestCommonAncestor)) {
-          if (lowestCommonAncestor.type === TYPE_HEADING) {
+          if (lowestCommonAncestor.type === HEADING_ELEMENT_TYPE) {
             return [lowestCommonAncestor];
           }
-          if (lowestCommonAncestor.type === TYPE_LIST) {
+          if (lowestCommonAncestor.type === LIST_ELEMENT_TYPE) {
             return [lowestCommonAncestor];
           }
-          if (lowestCommonAncestor.type === TYPE_TABLE_CAPTION) {
+          if (lowestCommonAncestor.type === TABLE_CAPTION_ELEMENT_TYPE) {
             return lowestCommonAncestor.children;
           }
-          if (lowestCommonAncestor.type === TYPE_LIST_ITEM) {
+          if (lowestCommonAncestor.type === LIST_ITEM_ELEMENT_TYPE) {
             const lowestCommonList = [...Node.nodes(section)].find(([element]) => {
               return Element.isElement(element) && element.children.includes(lowestCommonAncestor);
             })?.[0];

src/components/SlateEditor/plugins/blockPicker/SlateBlockPicker.tsx

@@ -68,8 +68,9 @@ import { defaultPitchBlock } from "../pitch/utils";
 import { defaultRelatedBlock } from "../related";
 import { RELATED_ELEMENT_TYPE } from "../related/types";
 import { defaultTableBlock } from "../table/defaultBlocks";
-import { isInTableCellHeader, isTableCell } from "../table/slateHelpers";
-import { TYPE_TABLE } from "../table/types";
+import { isAnyTableCellElement } from "../table/queries";
+import { isInTableCellHeader } from "../table/slateHelpers";
+import { TABLE_ELEMENT_TYPE } from "../table/types";
 import { IS_MAC } from "../toolbar/ToolbarToggle";
 import { DISCLAIMER_ELEMENT_TYPE } from "../uuDisclaimer/types";
 import { defaultDisclaimerBlock } from "../uuDisclaimer/utils";
@@ -135,7 +136,7 @@ const getLeftAdjust = (parent?: Node) => {
   if (Element.isElement(parent) && parent.type === TYPE_LIST_ITEM) {
     return 110;
   }
-  if (isTableCell(parent)) {
+  if (isAnyTableCellElement(parent)) {
     return 100;
   }
   if (isGridElement(parent)) {
@@ -306,7 +307,7 @@ const SlateBlockPicker = ({
         onInsertBlock(defaultDetailsBlock(), true);
         break;
       }
-      case TYPE_TABLE: {
+      case TABLE_ELEMENT_TYPE: {
         onInsertBlock(defaultTableBlock(2, 2), true);
         break;
       }

src/components/SlateEditor/plugins/blockPicker/SlateVisualElementPicker.tsx

@@ -17,7 +17,7 @@ import { Embed } from "../../../../interfaces";
 import getCurrentBlock from "../../utils/getCurrentBlock";
 import { defaultEmbedBlock } from "../embed/utils";
 import { defaultFileBlock } from "../file/utils";
-import { TYPE_TABLE_CELL } from "../table/types";
+import { TABLE_CELL_ELEMENT_TYPE } from "../table/types";
 
 export const checkboxAction = (
   image: IImageMetaInformationV3DTO,
@@ -40,7 +40,7 @@ const getNewEmbed = (editor: Editor, visualElement: Embed) => {
   const data = visualElement;
 
   if (data.resource === "image") {
-    const tableCell = getCurrentBlock(editor, TYPE_TABLE_CELL)?.[0];
+    const tableCell = getCurrentBlock(editor, TABLE_CELL_ELEMENT_TYPE)?.[0];
     if (tableCell) {
       return defaultEmbedBlock({ ...data, size: "xsmall", align: "left" });
     }

src/components/SlateEditor/plugins/blockPicker/actions.tsx

@@ -49,7 +49,7 @@ import { KEY_FIGURE_ELEMENT_TYPE } from "../keyFigure/types";
 import { LINK_BLOCK_LIST_ELEMENT_TYPE } from "../linkBlockList/types";
 import { PITCH_ELEMENT_TYPE } from "../pitch/types";
 import { RELATED_ELEMENT_TYPE } from "../related/types";
-import { TYPE_TABLE } from "../table/types";
+import { TABLE_ELEMENT_TYPE } from "../table/types";
 import { DISCLAIMER_ELEMENT_TYPE } from "../uuDisclaimer/types";
 import { BRIGHTCOVE_ELEMENT_TYPE } from "../video/types";
 
@@ -77,7 +77,7 @@ export const commonActions: Action[] = [
     bookmark: "#bkmrk-ekspanderende-boks",
   },
   {
-    data: { type: TYPE_TABLE, object: "table" },
+    data: { type: TABLE_ELEMENT_TYPE, object: "table" },
     icon: <TableLine />,
     bookmark: "#bkmrk-tabell",
   },

src/components/SlateEditor/plugins/break/index.tsx

@@ -13,7 +13,7 @@ import { DETAILS_ELEMENT_TYPE } from "../details/detailsTypes";
 import { DIV_ELEMENT_TYPE } from "../div/types";
 import { FRAMED_CONTENT_ELEMENT_TYPE } from "../framedContent/framedContentTypes";
 import { GRID_CELL_ELEMENT_TYPE } from "../grid/types";
-import { TYPE_TABLE_CELL } from "../table/types";
+import { TABLE_CELL_ELEMENT_TYPE } from "../table/types";
 import { DISCLAIMER_ELEMENT_TYPE } from "../uuDisclaimer/types";
 
 const allowedBreakContainers = ["section", "div", "aside", "li", "h1", "h2", "h3", "h4", "h5", "h6", "pre"];
@@ -35,7 +35,7 @@ export const breakPlugin = _breakPlugin.configure({
       GRID_CELL_ELEMENT_TYPE,
       DISCLAIMER_ELEMENT_TYPE,
       COPYRIGHT_ELEMENT_TYPE,
-      TYPE_TABLE_CELL,
+      TABLE_CELL_ELEMENT_TYPE,
     ],
   },
 });

src/components/SlateEditor/plugins/paragraph/index.tsx

@@ -13,15 +13,15 @@ import {
   NOOP_ELEMENT_TYPE,
 } from "@ndla/editor";
 import { SUMMARY_ELEMENT_TYPE } from "../details/summaryTypes";
-import { TYPE_TABLE_CELL } from "../table/types";
+import { TABLE_CELL_ELEMENT_TYPE } from "../table/types";
 
 export const paragraphSerializer = _paragraphSerializer;
 
 export const paragraphPlugin = _paragraphPlugin.configure({
   options: {
     nonSerializableParents: {
       override: true,
-      value: [TYPE_TABLE_CELL, LIST_ITEM_ELEMENT_TYPE, SUMMARY_ELEMENT_TYPE, NOOP_ELEMENT_TYPE],
+      value: [TABLE_CELL_ELEMENT_TYPE, LIST_ITEM_ELEMENT_TYPE, SUMMARY_ELEMENT_TYPE, NOOP_ELEMENT_TYPE],
     },
   },
 });

src/components/SlateEditor/plugins/span/index.tsx

@@ -29,7 +29,7 @@ import {
   DEFINITION_TERM_ELEMENT_TYPE,
 } from "../definitionList/definitionListTypes";
 import { SUMMARY_ELEMENT_TYPE } from "../details/summaryTypes";
-import { TYPE_TABLE_CELL } from "../table/types";
+import { TABLE_CELL_ELEMENT_TYPE } from "../table/types";
 
 export interface SpanElement {
   type: "span";
@@ -47,7 +47,7 @@ const normalizerConfig: NormalizerConfig = {
       HEADING_ELEMENT_TYPE,
       PARAGRAPH_ELEMENT_TYPE,
       BLOCK_QUOTE_ELEMENT_TYPE,
-      TYPE_TABLE_CELL,
+      TABLE_CELL_ELEMENT_TYPE,
       LIST_ITEM_ELEMENT_TYPE,
       DEFINITION_DESCRIPTION_ELEMENT_TYPE,
       DEFINITION_TERM_ELEMENT_TYPE,

src/components/SlateEditor/plugins/table/TableActions.tsx

@@ -15,10 +15,10 @@ import { Button, IconButton, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EditColgroupsDialog from "./EditColgroupsDialog";
 import { TableElement } from "./interfaces";
+import { isTableElement, isTableHeadElement } from "./queries";
 import { alignColumn } from "./slateActions";
-import { isTable, isTableHead } from "./slateHelpers";
 import { insertColumn, insertRow, insertTableHead, removeColumn, removeRow, toggleRowHeaders } from "./toolbarActions";
-import { TYPE_TABLE_CAPTION } from "./types";
+import { TABLE_CAPTION_ELEMENT_TYPE } from "./types";
 import { DRAFT_HTML_SCOPE } from "../../../../constants";
 import { useSession } from "../../../../containers/Session/SessionProvider";
 import getCurrentBlock from "../../utils/getCurrentBlock";
@@ -144,9 +144,9 @@ const TableActions = ({ editor, element }: Props) => {
 
   const tablePath = ReactEditor.findPath(editor, element);
   const [table] = Editor.node(editor, tablePath);
-  const captionEntry = getCurrentBlock(editor, TYPE_TABLE_CAPTION);
+  const captionEntry = getCurrentBlock(editor, TABLE_CAPTION_ELEMENT_TYPE);
 
-  if (!isTable(table) || captionEntry) {
+  if (!isTableElement(table) || captionEntry) {
     return null;
   }
 
@@ -191,7 +191,7 @@ const TableActions = ({ editor, element }: Props) => {
   };
 
   const tableHead = table.children[1];
-  const hasTableHead = isTableHead(tableHead);
+  const hasTableHead = isTableHeadElement(tableHead);
   const selectedPath = editor.selection?.anchor.path;
 
   const showAddHeader = selectedPath && !hasTableHead;
@@ -241,7 +241,7 @@ const TableActions = ({ editor, element }: Props) => {
             data-testid="toggle-row-headers"
             onMouseDown={(e: MouseEvent<HTMLButtonElement>) => handleOnClick(e, "toggle-row-headers")}
           >
-            {t(`form.content.table.${isTable(table) && table.rowHeaders ? "disable-header" : "enable-header"}`)}
+            {t(`form.content.table.${isTableElement(table) && table.rowHeaders ? "disable-header" : "enable-header"}`)}
           </Button>
         </ActionGrid>
       </StyledTableActions>