mobile: update toolbar

apps/mobile/app/screens/settings/editor/state.ts

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import type { ToolbarGroupDefinition } from "@notesnook/editor/dist/toolbar/types";
 import create, { State } from "zustand";
 import { persist, StateStorage } from "zustand/middleware";
-import { db } from "../../../common/database";
+import { DatabaseLogger, db } from "../../../common/database";
 import { MMKV } from "../../../common/database/mmkv";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { presets } from "./toolbar-definition";
+import { ToolbarConfig } from "@notesnook/core";
 export type ToolDefinition = string | string[];
 
 export type DraggedItem = {
@@ -55,6 +56,25 @@ function clone<T>(value: T[]) {
   return JSON.parse(JSON.stringify(value));
 }
 
+function migrateToolbar(tools: ToolbarConfig) {
+  const version = MMKV.getInt("editor:tools_version") || 0;
+
+  switch (version) {
+    case 0: {
+      tools.config?.push(["checkList"]);
+      DatabaseLogger.info(`Toolbar migrated to version ${version + 1}`);
+      MMKV.setInt("editor:tools_version", version + 1);
+      db.settings.setToolbarConfig("mobile", tools);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+  console.log(tools);
+  return tools;
+}
+
 export const useDragState = create<DragState>(
   persist(
     (set, get) => ({
@@ -97,13 +117,15 @@ export const useDragState = create<DragState>(
       init: async () => {
         const user = await db.user?.getUser();
         if (!user) return;
-        const toolbarConfig = db.settings.getToolbarConfig(
+        let toolbarConfig = db.settings.getToolbarConfig(
           useSettingStore.getState().deviceMode || ("mobile" as any)
         );
         if (!toolbarConfig) {
           logger.info("DragState", "No user defined toolbar config was found");
           return;
         }
+
+        toolbarConfig = migrateToolbar(toolbarConfig);
         const preset = toolbarConfig?.preset as DragState["preset"];
         set({
           preset: preset,

apps/mobile/app/services/settings.ts

@@ -159,6 +159,7 @@ function setProperty<K extends keyof SettingStore["settings"]>(
 function onFirstLaunch() {
   const introCompleted = get().introCompleted;
   if (!introCompleted) {
+    MMKV.setInt("editor:tools_version", 1);
     set({
       rateApp: Date.now() + 86400000 * 2,
       nextBackupRequestTime: Date.now() + 86400000 * 3

packages/editor/src/extensions/check-list-item/check-list-item.ts

@@ -106,6 +106,13 @@ export const CheckListItem = Node.create<CheckListItemOptions>({
 
       checkbox.contentEditable = "false";
       checkbox.type = "checkbox";
+
+      checkbox.addEventListener("mousedown", (event) => {
+        if (globalThis.keyboardShown) {
+          event.preventDefault();
+        }
+      });
+
       checkbox.addEventListener("change", (event) => {
         event.preventDefault();
         // if the editor isn’t editable and we don't have a handler for

packages/editor/styles/styles.css

@@ -635,9 +635,21 @@ p > *::selection {
   margin-right: 0.5rem;
   user-select: none;
   height: 18px;
+  width: 18px;
   accent-color: var(--accent);
 }
 
 .ProseMirror ul.simple-checklist > li > div {
   flex: 1 1 auto;
+}
+
+@media screen and (max-width: 480px) {
+  .ProseMirror ul.simple-checklist > li  > input {
+    height: 21px;
+    width: 21px;
+  }
+  
+  .ProseMirror ul.simple-checklist > li > div {
+    margin-top: 2px;
+  }
 }