@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/RichTextEditor/RichTextEditor/utils/keymap.ts

@@ -0,0 +1,101 @@
+import {
+  ProseMirrorCommands,
+  ProseMirrorHistory,
+  ProseMirrorInputrules,
+  ProseMirrorModel,
+  ProseMirrorSchemaList,
+  ProseMirrorState,
+} from "../../utils/prosemirror"
+
+type KeyBinding = {
+  [key: string]: ProseMirrorState.Command
+}
+
+export const buildKeymap = (schema: ProseMirrorModel.Schema): KeyBinding => {
+  const { redo, undo } = ProseMirrorHistory
+  const { undoInputRule } = ProseMirrorInputrules
+  const { wrapInList, splitListItem, liftListItem, sinkListItem } =
+    ProseMirrorSchemaList
+
+  const mac =
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+    typeof navigator != "undefined" ? /Mac/.test(navigator.platform) : false
+
+  const {
+    chainCommands,
+    exitCode,
+    joinDown,
+    joinUp,
+    lift,
+    selectParentNode,
+    setBlockType,
+    toggleMark,
+  } = ProseMirrorCommands
+
+  const keys: KeyBinding = {
+    "Mod-z": undo,
+    "Shift-Mod-z": redo,
+    Backspace: undoInputRule,
+    "Alt-ArrowUp": joinUp,
+    "Alt-ArrowDown": joinDown,
+    "Mod-BracketLeft": lift,
+    Escape: selectParentNode,
+  }
+
+  if (!mac) {
+    keys["Mod-y"] = redo
+  }
+
+  if (schema.marks.strong) {
+    const type = schema.marks.strong
+    keys["Mod-b"] = toggleMark(type)
+    keys["Mod-B"] = toggleMark(type)
+  }
+
+  if (schema.marks.em) {
+    const type = schema.marks.em
+    keys["Mod-i"] = toggleMark(type)
+    keys["Mod-I"] = toggleMark(type)
+  }
+
+  if (schema.marks.underline) {
+    const type = schema.marks.underline
+    keys["Mod-u"] = toggleMark(type)
+    keys["Mod-U"] = toggleMark(type)
+  }
+
+  if (schema.nodes.hardBreak) {
+    const br = schema.nodes.hardBreak
+    const cmd = chainCommands(exitCode, (state, dispatch) => {
+      dispatch &&
+        dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView())
+      return true
+    })
+    keys["Mod-Enter"] = cmd
+    keys["Shift-Enter"] = cmd
+    if (mac) {
+      keys["Ctrl-Enter"] = cmd
+    }
+  }
+
+  if (schema.nodes.paragraph) {
+    keys["Shift-Ctrl-0"] = setBlockType(schema.nodes.paragraph)
+  }
+
+  if (schema.nodes.bulletList) {
+    keys["Shift-Ctrl-8"] = wrapInList(schema.nodes.bulletList)
+  }
+
+  if (schema.nodes.orderedList) {
+    keys["Shift-Ctrl-9"] = wrapInList(schema.nodes.orderedList)
+  }
+
+  if (schema.nodes.listItem) {
+    const type = schema.nodes.listItem
+    keys["Enter"] = splitListItem(type)
+    keys["Mod-["] = liftListItem(type)
+    keys["Mod-]"] = sinkListItem(type)
+  }
+
+  return keys
+}

package/src/RichTextEditor/_mixins.scss

@@ -0,0 +1,83 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+
+@mixin content-styles {
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  position: relative;
+  white-space: pre-wrap;
+  box-sizing: content-box;
+
+  > p {
+    margin: 0 0 $spacing-16;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+
+    > li:last-of-type {
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  > *:first-child {
+    margin-top: 0;
+
+    > li:first-of-type {
+      p {
+        margin-top: 0;
+      }
+    }
+  }
+
+  a {
+    color: $color-blue-500;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  @include nested-list-styles {
+    @include nested-list-styles;
+  }
+}
+
+@mixin nested-list-styles {
+  ul,
+  ol {
+    padding-inline-start: $spacing-40; // default browser styling
+  }
+
+  ol {
+    list-style-type: decimal;
+
+    ol {
+      list-style-type: lower-alpha;
+
+      ol {
+        list-style-type: lower-roman;
+        @content;
+      }
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+
+    ul {
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+        @content;
+      }
+    }
+  }
+}

package/src/RichTextEditor/constants.ts

@@ -0,0 +1,10 @@
+import { ToolbarControlTypes } from "./types"
+
+export const TOOLBAR_CONTROLS: ToolbarControlTypes[] = [
+  "bold",
+  "italic",
+  "underline",
+  "orderedList",
+  "bulletList",
+  "link",
+]

package/src/RichTextEditor/index.ts

@@ -0,0 +1,9 @@
+export * from "./EditableRichTextContent"
+export * from "./RichTextContent"
+export * from "./RichTextEditor"
+export * from "./types"
+export * from "./utils/commands"
+export * from "./utils/core"
+export * from "./utils/plugins"
+export * from "./utils/prosemirror"
+export * from "./utils/schema"

package/src/RichTextEditor/types.ts

@@ -0,0 +1,39 @@
+export type ToolbarControlTypes =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "orderedList"
+  | "bulletList"
+  | "link"
+
+export type ToolbarItems = {
+  name: ToolbarControlTypes
+  /**
+   * A group is used to wrap items in the same section wrapper
+   * ungrouped items will be appended to the end of the toolbar */
+  group?: string
+}
+
+export type EditorContentArray = Array<{ [key: string]: any }>
+
+export type EditorRows =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20

package/src/RichTextEditor/utils/commands/addMark.spec.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, jest } from "@jest/globals"
+import { findByText, waitFor } from "@testing-library/dom"
+import { createRichTextEditor } from "../core"
+import { addMark } from "./addMark"
+import {
+  mockRangeForBoundingRect,
+  simulateSelectionByText,
+  simulateTextInsert,
+} from "./fixtures/helpers"
+import { testEditorState, testSchema } from "./fixtures/test-state"
+
+describe("addMark()", () => {
+  const onChange = jest.fn()
+  const attributes = { "aria-labelledby": "label-text-123" }
+
+  it("creates an empty wrapper of the given Mark type if no selection is provided", async () => {
+    const node = document.createElement("div")
+    const { dispatchTransaction } = createRichTextEditor({
+      node,
+      onChange,
+      attributes,
+      initialEditorState: testEditorState,
+    })
+
+    expect(node.querySelectorAll("strong").length).toBe(0)
+    // adds the empty strong wrapper
+    dispatchTransaction(addMark(testSchema.marks.strong))
+    // inserts text into the strong wrapper
+    dispatchTransaction(simulateTextInsert("I will be strong"))
+    await findByText(node, "I will be strong")
+
+    await waitFor(() => {
+      expect(node.querySelectorAll("strong").length).toBe(1)
+    })
+  })
+
+  it("wraps the current selection in the given mark type", async () => {
+    mockRangeForBoundingRect()
+    const node = document.createElement("div")
+    const { dispatchTransaction } = createRichTextEditor({
+      node,
+      onChange,
+      attributes,
+      initialEditorState: testEditorState,
+    })
+
+    expect(node.querySelectorAll("strong").length).toBe(0)
+
+    dispatchTransaction(simulateTextInsert("Selected "))
+    await findByText(node, "Selected Example content")
+
+    dispatchTransaction(simulateSelectionByText("Selected"))
+    dispatchTransaction(addMark(testSchema.marks.strong))
+
+    await waitFor(() => {
+      expect(node.querySelectorAll("strong").length).toBe(1)
+    })
+  })
+})

package/src/RichTextEditor/utils/commands/addMark.ts

@@ -0,0 +1,19 @@
+import { EditorState, Transaction } from "prosemirror-state"
+import { CommandFactory } from "../core/types"
+
+/** Wrap the users current selection in the given Mark type   */
+export const addMark: CommandFactory =
+  (type, attrs) =>
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    const { tr, selection } = state
+    const { $from, $to } = selection
+    if (!dispatch) return false
+    if (selection.empty) {
+      dispatch(tr.addStoredMark(type.create(attrs)))
+    } else {
+      tr.addMark($from.pos, $to.pos, type.create(attrs))
+
+      dispatch(tr.scrollIntoView())
+    }
+    return true
+  }

package/src/RichTextEditor/utils/commands/fixtures/data.json

@@ -0,0 +1,102 @@
+{
+  "testDocNodeContentWithMarksJSON": [
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "marks": [{ "type": "strong" }],
+          "text": "Example Strong Mark"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "marks": [{ "type": "em" }],
+          "text": "Example Italic Mark"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://cultureamp.design",
+                "_metadata": null,
+                "target": "_blank",
+                "rel": "noreferrer"
+              }
+            }
+          ],
+          "text": "Example Link Mark"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "marks": [
+            { "type": "strong" },
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://google.com",
+                "_metadata": null,
+                "target": "_blank",
+                "rel": "noreferrer"
+              }
+            }
+          ],
+          "text": "Mixed Mark Link Example"
+        }
+      ]
+    }
+  ],
+  "testDocNodeContentWithListsJSON": [
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "marks": [{ "type": "strong" }],
+          "text": "Example content"
+        }
+      ]
+    },
+    {
+      "type": "bulletList",
+      "content": [
+        {
+          "type": "listItem",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [{ "type": "text", "text": "Bullet List Item Node" }]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "testDocNodeContentJSON": [
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "type": "text",
+          "text": "Example content"
+        }
+      ]
+    }
+  ]
+}

package/src/RichTextEditor/utils/commands/fixtures/helpers.ts

@@ -0,0 +1,148 @@
+import {
+  EditorState,
+  Selection,
+  TextSelection,
+  Transaction,
+} from "prosemirror-state"
+import { findChildrenByType } from "prosemirror-utils"
+import { ProseMirrorModel } from "../../prosemirror"
+
+/*
+ ** This is used handle the JSDom type error issue you may encounter in testing
+ ** See https://github.com/jsdom/jsdom/issues/3002
+ */
+export const mockRangeForBoundingRect = (): void => {
+  jest.spyOn(document, "createRange").mockImplementation(() => {
+    const range = new Range()
+
+    range.getBoundingClientRect = () => ({
+      x: 0,
+      y: 0,
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+      toJSON: () => undefined,
+    })
+
+    range.getClientRects = () => ({
+      item: () => null,
+      length: 0,
+      [Symbol.iterator]: jest.fn(),
+    })
+
+    return range
+  })
+}
+
+/*
+ ** Prosemirror cannot intuit a real `Selection` of content injected into the base test.
+ ** To combat this you can pass in a start and end position of the your anchor (text node)
+ ** This can be found using .$anchor.pos
+ */
+export const simulateRangeSelection =
+  (anchorPositionStart: number = 0, anchorPositionEnd: number = 2) =>
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    const { tr } = state
+
+    tr.setSelection(
+      new TextSelection(
+        tr.doc.resolve(anchorPositionStart),
+        tr.doc.resolve(anchorPositionEnd)
+      )
+    )
+    if (dispatch) {
+      dispatch(tr)
+    }
+    return true
+  }
+
+export const getStartNode = (
+  state: EditorState
+): ReturnType<ProseMirrorModel.Node["childAfter"]> => {
+  const currentSelection: Selection = state.tr.selection
+  const startNode = currentSelection.$from.parent.childAfter(
+    currentSelection.$from.parentOffset
+  )
+  return startNode
+}
+
+export const simulateSelectionOfCurrentElement =
+  (selectEntireElement: boolean = false) =>
+  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+    const { tr } = state
+    let endPos = tr.selection.from + 1
+
+    const startNode = getStartNode(state)
+    const nodeLength = startNode.node?.nodeSize || 0
+
+    if (selectEntireElement) {
+      endPos = nodeLength + 1
+    }
+
+    tr.setSelection(
+      new TextSelection(
+        tr.doc.resolve(tr.selection.from),
+        tr.doc.resolve(endPos)
+      )
+    )
+    if (dispatch) {
+      dispatch(tr)
+    }
+    return true
+  }
+
+const getNodeByText = (
+  state: EditorState,
+  selectedText: string
+): {
+  node: ProseMirrorModel.Node
+  pos: number
+} => {
+  let filteredNodes = findChildrenByType(
+    state.doc,
+    state.schema.nodes.text,
+    true
+  )
+
+  filteredNodes = filteredNodes.filter(textNode => {
+    if (textNode.node.text && textNode.node.text.indexOf(selectedText) > -1) {
+      return textNode
+    }
+    return false
+  })
+
+  return filteredNodes[0]
+}
+
+export const simulateSelectionByText =
+  (selectedText: string) =>
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    const { tr } = state
+
+    const startNode = getNodeByText(state, selectedText)
+    const startPos = startNode.pos
+    const endPos = startPos + selectedText.length
+
+    if (startPos !== undefined) {
+      tr.setSelection(
+        new TextSelection(tr.doc.resolve(startPos), tr.doc.resolve(endPos))
+      )
+    }
+
+    if (dispatch) {
+      dispatch(tr)
+    }
+    return true
+  }
+
+export const simulateTextInsert =
+  (text: string) =>
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    if (dispatch) {
+      dispatch(state.tr.insertText(text))
+    }
+    return true
+  }

package/src/RichTextEditor/utils/commands/fixtures/test-state.ts

@@ -0,0 +1,39 @@
+import { Schema } from "prosemirror-model"
+import { createDocNode, createEditorState } from "../../core/state"
+import { getMarks } from "../../schema/marks"
+import { getNodes } from "../../schema/nodes"
+
+const data = require("./data.json")
+
+export const testSchema = new Schema({
+  nodes: getNodes(),
+  marks: getMarks(),
+})
+
+export const testDocNodeBasic = {
+  type: "doc",
+  content: data.testDocNodeContentJSON,
+}
+
+export const testDocNodeMarks = {
+  type: "doc",
+  content: data.testDocNodeContentWithMarksJSON,
+}
+
+export const testDocNodeLists = {
+  type: "doc",
+  content: data.testDocNodeContentWithListsJSON,
+}
+
+export const testEditorState = createEditorState(
+  testSchema,
+  createDocNode(testSchema, testDocNodeBasic)
+)
+export const testEditorStateWithMarks = createEditorState(
+  testSchema,
+  createDocNode(testSchema, testDocNodeMarks)
+)
+export const testEditorStateWitList = createEditorState(
+  testSchema,
+  createDocNode(testSchema, testDocNodeLists)
+)

package/src/RichTextEditor/utils/commands/getMarkAttrs.spec.ts

@@ -0,0 +1,58 @@
+import { waitFor } from "@testing-library/dom"
+import { EditorState } from "prosemirror-state"
+import { createRichTextEditor } from "../core"
+import { simulateSelectionByText } from "./fixtures/helpers"
+import { testEditorStateWithMarks, testSchema } from "./fixtures/test-state"
+import { getMarkAttrs } from "./getMarkAttrs"
+
+describe("getMarkAttrs()", () => {
+  const onChange = jest.fn()
+  const attributes = { "aria-labelledby": "label-text-123" }
+
+  it("returns an empty object if the selected Mark has no attributes", async () => {
+    const node = document.createElement("div")
+    const { dispatchTransaction } = createRichTextEditor({
+      node,
+      onChange,
+      attributes,
+      initialEditorState: testEditorStateWithMarks,
+    })
+    let currentState = testEditorStateWithMarks
+
+    dispatchTransaction(simulateSelectionByText("Example Strong Mark"))
+    dispatchTransaction((editorState: EditorState) => {
+      currentState = editorState
+      return true
+    })
+
+    const markAttrs = getMarkAttrs(currentState, testSchema.marks.link)
+
+    await waitFor(() => {
+      expect(markAttrs).toEqual({})
+    })
+  })
+
+  it("returns an object with its attributes if it matches the Selected Mark", async () => {
+    const node = document.createElement("div")
+    const { dispatchTransaction } = createRichTextEditor({
+      node,
+      onChange,
+      attributes,
+      initialEditorState: testEditorStateWithMarks,
+    })
+    let currentState = testEditorStateWithMarks
+
+    dispatchTransaction(simulateSelectionByText("Example Link Mark"))
+    dispatchTransaction((editorState: EditorState) => {
+      currentState = editorState
+      return true
+    })
+
+    const markAttrs = getMarkAttrs(currentState, testSchema.marks.link)
+
+    await waitFor(() => {
+      expect(markAttrs).toHaveProperty("href", "https://cultureamp.design")
+      expect(markAttrs).toHaveProperty("target", "_blank")
+    })
+  })
+})

package/src/RichTextEditor/utils/commands/getMarkAttrs.ts

@@ -0,0 +1,23 @@
+import { Attrs, Mark, MarkType } from "prosemirror-model"
+import { EditorState } from "prosemirror-state"
+
+/*
+ ** Filters through the states Marks and returns the attributes
+ ** of the Mark found, else returns and empty object
+ */
+export const getMarkAttrs = (state: EditorState, type: MarkType): Attrs => {
+  const { from, to } = state.selection
+  let marks: Mark[] = []
+
+  state.doc.nodesBetween(from, to, node => {
+    marks = [...marks, ...node.marks]
+  })
+
+  const mark = marks.find(markItem => markItem.type.name === type.name)
+
+  if (mark) {
+    return mark.attrs
+  }
+
+  return {}
+}