chore: update editor

SnailyCAD · Oct 21, 2023 · 222a7bf · 222a7bf
1 parent 44db6f7
commit 222a7bf
Show file tree

Hide file tree

Showing 11 changed files with 940 additions and 993 deletions.
diff --git a/apps/api/src/controllers/dispatch/911-calls/calls-911-controller.ts b/apps/api/src/controllers/dispatch/911-calls/calls-911-controller.ts
@@ -191,7 +191,7 @@ export class Calls911Controller {
       data: {
         location: data.location ?? undefined,
         postal: data.postal ?? undefined,
-        description: data.description ?? undefined,
+        description: data.descriptionData ? null : data.description,
         descriptionData: data.descriptionData ?? undefined,
         name: data.name ?? undefined,
         userId: user.id || undefined,
@@ -312,7 +312,7 @@ export class Calls911Controller {
       data: {
         location: data.location,
         postal: data.postal,
-        description: data.description,
+        description: data.descriptionData ? null : data.description,
         name: data.name,
         userId: user.id,
         positionId: shouldRemovePosition ? null : position?.id ?? call.positionId,

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -46,7 +46,7 @@
     "@types/is-hotkey": "^0.1.8",
     "@types/leaflet": "^1.9.7",
     "@types/nprogress": "^0.2.2",
-    "@types/react": "^18.2.29",
+    "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@types/sortablejs": "^1.15.4",
     "@types/uuid": "^9.0.6",
@@ -85,9 +85,9 @@
     "remark-external-links": "^9.0.1",
     "remark-gfm": "^4.0.0",
     "remark-github": "^12.0.0",
-    "slate": "^0.94.1",
-    "slate-history": "^0.93.0",
-    "slate-react": "^0.99.0",
+    "slate": "^0.100.0",
+    "slate-history": "^0.100.0",
+    "slate-react": "^0.100.0",
     "socket.io-client": "^4.7.2",
     "sortablejs": "^1.15.0",
     "storage-factory": "^0.2.1",

diff --git a/apps/client/src/components/editor/editor.tsx b/apps/client/src/components/editor/editor.tsx
@@ -115,6 +115,8 @@ export function Editor(props: EditorProps) {
     editor.onChange();
   }, [props.value]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  console.log({ props });
+
   return (
     <div
       className={classNames(
@@ -127,14 +129,8 @@ export function Editor(props: EditorProps) {
       <Slate
         editor={editor}
         initialValue={props.value as Descendant[]}
-        onChange={(value) => {
-          const isAstChange = editor.operations.some(
-            (operation) => operation.type !== "set_selection",
-          );
-
-          if (isAstChange) {
-            handleChange(value);
-          }
+        onValueChange={(value) => {
+          handleChange(value);
         }}
       >
         {props.isReadonly ? null : <Toolbar />}

diff --git a/apps/client/src/components/editor/elements/checklist-item.tsx b/apps/client/src/components/editor/elements/checklist-item.tsx
@@ -1,13 +1,13 @@
 import { classNames } from "lib/classNames";
 import { Transforms } from "slate";
-import { ReactEditor, useReadOnly, useSlateStatic, type RenderElementProps } from "slate-react";
+import { ReactEditor, useReadOnly, type RenderElementProps, useSlate } from "slate-react";
 import type { CheckListItemElement as ICheckListItemElement } from "@snailycad/utils/editor";
 import { CheckboxField } from "@snailycad/ui";
 
 type Props = RenderElementProps & { element: ICheckListItemElement };
 
 export function CheckListItemElement({ attributes, children, element }: Props) {
-  const editor = useSlateStatic();
+  const editor = useSlate();
   const readOnly = useReadOnly();
 
   function handleSelectionChange(isSelected: boolean) {

diff --git a/apps/client/src/components/editor/toolbar.tsx b/apps/client/src/components/editor/toolbar.tsx
@@ -1,4 +1,3 @@
-import * as RToolbar from "@radix-ui/react-toolbar";
 import {
   Fonts,
   ListCheck,
@@ -25,12 +24,8 @@ import type { SlateElements, Text } from "@snailycad/utils/editor";
 
 export function Toolbar() {
   return (
-    <RToolbar.Root className="flex gap-1 mb-2 overflow-x-auto border-b border-secondary bg-tertiary p-2">
-      <RToolbar.ToolbarToggleGroup
-        className="flex gap-1"
-        type="multiple"
-        aria-label="Text formatting"
-      >
+    <div className="flex gap-1 mb-2 overflow-x-auto border-b border-secondary bg-tertiary p-2">
+      <div className="flex gap-1" aria-label="Text formatting">
         <MarkButton format="bold" icon={<TypeBold aria-label="bold" />} />
         <MarkButton format="italic" icon={<TypeItalic aria-label="italic" />} />
         <MarkButton format="underline" icon={<TypeUnderline aria-label="underline" />} />
@@ -40,20 +35,16 @@ export function Toolbar() {
         />
         <SelectColorPopover format="background-color" icon={<PaintBucket />} />
         <SelectColorPopover format="text-color" icon={<Fonts />} />
-      </RToolbar.ToolbarToggleGroup>
-      <RToolbar.Separator className="w-[1px] bg-neutral-400 dark:bg-secondary mx-1" />
-      <RToolbar.ToolbarToggleGroup
-        aria-label="Block formatting"
-        className="flex gap-1"
-        type="single"
-      >
+      </div>
+      <span className="w-[1px] bg-neutral-400 dark:bg-secondary mx-1" />
+      <div aria-label="Block formatting" className="flex gap-1">
         <BlockButton format="heading-one" icon={<TypeH1 aria-label="heading-one" />} />
         <BlockButton format="heading-two" icon={<TypeH2 aria-label="heading-two" />} />
         <BlockButton format="block-quote" icon={<Quote aria-label="block-quote" />} />
         <BlockButton format="bulleted-list" icon={<ListUl aria-label="bulleted-list" />} />
         <BlockButton format="check-list-item" icon={<ListCheck aria-label="check-list-item" />} />
-      </RToolbar.ToolbarToggleGroup>
-    </RToolbar.Root>
+      </div>
+    </div>
   );
 }
 
@@ -67,17 +58,15 @@ function BlockButton({ format, icon }: BlockButtonProps) {
   const isActive = isBlockActive(editor, format);
 
   return (
-    <RToolbar.ToolbarToggleItem asChild value={format}>
-      <Button
-        title={format}
-        type="button"
-        variant={isActive ? null : "default"}
-        className={classNames(isActive && "text-white bg-neutral-700")}
-        onPress={() => toggleBlock(editor, format)}
-      >
-        {icon}
-      </Button>
-    </RToolbar.ToolbarToggleItem>
+    <Button
+      title={format}
+      type="button"
+      variant={isActive ? null : "default"}
+      className={classNames(isActive && "text-white bg-neutral-700")}
+      onPress={() => toggleBlock(editor, format)}
+    >
+      {icon}
+    </Button>
   );
 }
 
@@ -92,16 +81,14 @@ function MarkButton({ format, icon, value = true }: MarkButtonProps) {
   const isActive = isMarkActive(editor, format);
 
   return (
-    <RToolbar.ToolbarToggleItem asChild value={format}>
-      <Button
-        title={format}
-        type="button"
-        variant={isActive ? null : "default"}
-        className={classNames(isActive && "text-white bg-neutral-700")}
-        onPress={() => toggleMark(editor, format, value)}
-      >
-        {icon}
-      </Button>
-    </RToolbar.ToolbarToggleItem>
+    <Button
+      title={format}
+      type="button"
+      variant={isActive ? null : "default"}
+      className={classNames(isActive && "text-white bg-neutral-700")}
+      onPress={() => toggleMark(editor, format, value)}
+    >
+      {icon}
+    </Button>
   );
 }
diff --git a/apps/client/src/components/editor/toolbar/select-color-popover.tsx b/apps/client/src/components/editor/toolbar/select-color-popover.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as Popover from "@radix-ui/react-popover";
-import { ToolbarToggleItem } from "@radix-ui/react-toolbar";
-import { Button } from "@snailycad/ui";
+import { Button, buttonVariants } from "@snailycad/ui";
 import { classNames } from "lib/classNames";
 import { isMarkActive, toggleMark } from "lib/editor/utils";
 import type { Text } from "slate";
@@ -29,20 +28,14 @@ export function SelectColorPopover({ icon, format }: SelectColorPopoverProps) {
 
   return (
     <Popover.Root onOpenChange={handleSave} open={isPopover}>
-      <Popover.Trigger asChild>
-        <span>
-          <ToolbarToggleItem asChild value={format}>
-            <Button
-              title={format}
-              type="button"
-              variant={isActive ? null : "default"}
-              className={classNames(isActive && "text-white bg-neutral-700")}
-              onPress={() => setIsPopoverOpen((v) => !v)}
-            >
-              {icon}
-            </Button>
-          </ToolbarToggleItem>
-        </span>
+      <Popover.Trigger
+        title={format}
+        className={buttonVariants({
+          variant: isActive ? "primary" : "default",
+          className: classNames(isActive && "text-white bg-neutral-700"),
+        })}
+      >
+        {icon}
       </Popover.Trigger>
 
       <Popover.Content

diff --git a/apps/client/tests/utils.test.ts b/apps/client/tests/utils.test.ts
@@ -29,7 +29,7 @@ describe("calculateAge", () => {
   });
 
   test("Should correctly calculate age", () => {
-    expect(calculateAge(DOB_2)).toMatchInlineSnapshot('"69"');
+    expect(calculateAge(DOB_2)).toMatchInlineSnapshot('"70"');
   });
 });
 

diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
     "@casperiv/eslint-config": "8.0.0",
     "@casperiv/eslint-config-next": "8.0.0",
     "@casperiv/eslint-config-react": "8.0.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-plugin-deprecation": "^2.0.0",
-    "lerna": "^7.3.1",
-    "lint-staged": "^15.0.1"
+    "lerna": "^7.4.1",
+    "lint-staged": "^15.0.2"
   },
   "lint-staged": {
     "*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\"": "prettier --write --ignore-path .prettierignore"
@@ -33,14 +33,14 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.1.0",
+    "@faker-js/faker": "^8.2.0",
     "colorette": "2.0.20",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "copy": "^0.3.2",
     "dotenv": "^16.3.1",
     "husky": "^8.0.3",
     "prettier": "3.0.3",
     "tsup": "6.6.2",
-    "turbo": "1.10.15"
+    "turbo": "1.10.16"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -20,20 +20,20 @@
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
     "@storybook/addon-themes": "^7.5.1",
-    "@storybook/blocks": "^7.5.0",
+    "@storybook/blocks": "^7.5.1",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.2",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "prop-types": "^15.8.1",
-    "storybook": "^7.5.0",
+    "storybook": "^7.5.1",
     "tailwindcss": "^3.3.3",
     "tsup": "6.6.2",
     "typescript": "^5.2.2",
@@ -103,7 +103,7 @@
     "@snailycad/config": "^1.75.1",
     "@snailycad/types": "workspace:*",
     "@snailycad/utils": "^1.75.1",
-    "@types/react": "^18.2.29",
+    "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "class-variance-authority": "^0.7.0",
     "formik": "^2.4.5",

diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -75,11 +75,11 @@
     "test": "pnpm vitest run"
   },
   "devDependencies": {
-    "@types/node": "^20.8.0",
+    "@types/node": "^20.8.7",
     "c8": "^8.0.1",
     "tsup": "6.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6"
   },
   "tsup": {
@@ -101,10 +101,10 @@
   "dependencies": {
     "@snailycad/types": "^1.75.1",
     "date-fns": "^2.30.0",
-    "slate": "0.94.1",
-    "slate-history": "^0.93.0",
-    "slate-react": "^0.99.0",
+    "slate": "0.100.0",
+    "slate-history": "^0.100.0",
+    "slate-react": "^0.100.0",
     "tslib": "^2.6.2",
-    "undici": "5.25.3"
+    "undici": "5.26.4"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ describe("calculateAge", () => { @@
       });
       test("Should correctly calculate age", () => {
-        expect(calculateAge(DOB_2)).toMatchInlineSnapshot('"69"');
+        expect(calculateAge(DOB_2)).toMatchInlineSnapshot('"70"');
       });
     });
@@ Expand Down @@