diff --git a/apps/mobile/app/screens/settings/editor/state.ts b/apps/mobile/app/screens/settings/editor/state.ts index b02bd4041..bf84fe521 100644 --- a/apps/mobile/app/screens/settings/editor/state.ts +++ b/apps/mobile/app/screens/settings/editor/state.ts @@ -20,10 +20,11 @@ along with this program. If not, see . 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(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( persist( (set, get) => ({ @@ -97,13 +117,15 @@ export const useDragState = create( 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, diff --git a/apps/mobile/app/services/settings.ts b/apps/mobile/app/services/settings.ts index 6186138e6..491741046 100644 --- a/apps/mobile/app/services/settings.ts +++ b/apps/mobile/app/services/settings.ts @@ -159,6 +159,7 @@ function setProperty( 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 diff --git a/packages/editor/src/extensions/check-list-item/check-list-item.ts b/packages/editor/src/extensions/check-list-item/check-list-item.ts index 8873a3143..afc407767 100644 --- a/packages/editor/src/extensions/check-list-item/check-list-item.ts +++ b/packages/editor/src/extensions/check-list-item/check-list-item.ts @@ -106,6 +106,13 @@ export const CheckListItem = Node.create({ 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 diff --git a/packages/editor/styles/styles.css b/packages/editor/styles/styles.css index 6532d7c26..75fd13d1b 100644 --- a/packages/editor/styles/styles.css +++ b/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; + } } \ No newline at end of file