@scalar/use-codemirror 0.7.19 → 0.7.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalar/use-codemirror
 
+## 0.7.21
+
+### Patch Changes
+
+- cd7afa70: fix: don't scale codemirror text on mobile webkit
+
+## 0.7.20
+
+### Patch Changes
+
+- 3d712d74: chore: remove light/dark mode features from useCodeMirror
+
 ## 0.7.19
 
 ### Patch Changes

package/dist/components/CodeMirror/CodeMirror.vue.d.ts

@@ -10,10 +10,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     lineNumbers?: boolean | undefined;
     withoutTheme?: boolean | undefined;
     disableEnter?: boolean | undefined;
-    forceDarkMode?: boolean | undefined;
 }>, {
     disableEnter: boolean;
-    forceDarkMode: boolean;
 }>, {
     setCodeMirrorContent: (content?: string | undefined) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -28,14 +26,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     lineNumbers?: boolean | undefined;
     withoutTheme?: boolean | undefined;
     disableEnter?: boolean | undefined;
-    forceDarkMode?: boolean | undefined;
 }>, {
     disableEnter: boolean;
-    forceDarkMode: boolean;
 }>>> & {
     onChange?: ((value: string) => any) | undefined;
 }, {
-    forceDarkMode: boolean;
     disableEnter: boolean;
 }, {}>;
 export default _default;

package/dist/components/CodeMirror/CodeMirror.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAUlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAoQjC,OAAO;kBADR,OAAO;;AAV1B,wBAmBG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAUlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6PlC,OAAO;;AAV1B,wBAkBG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/hooks/useCodeMirror.d.ts

@@ -10,14 +10,6 @@ type UseCodeMirrorParameters = {
      * Prefill the content. Will be ignored when a provider is given.
      */
     content?: string;
-    /**
-     * Force the dark mode.
-     */
-    forceDarkMode?: boolean;
-    /**
-     * Force the light mode.
-     */
-    forceLightMode?: boolean;
     /**
      * Whether to load a theme.
      */

package/dist/hooks/useCodeMirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAM/D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,KAAK,CAAA;AAO1C,KAAK,uBAAuB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,aAAa,eACZ,uBAAuB;WAE5B,IAAI,MAAM,CAAC;mBACH,IAAI,cAAc,GAAG,IAAI,CAAC;gBAC7B,IAAI,UAAU,GAAG,IAAI,CAAC;qCACD,MAAM,KAAK,IAAI;2CACT,SAAS,EAAE,KAAK,IAAI;uCACxB,SAAS,EAAE,KAAK,IAAI;CAgLxD,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,KAAK,CAAA;AAI1C,KAAK,uBAAuB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,aAAa,eACZ,uBAAuB;WAE5B,IAAI,MAAM,CAAC;mBACH,IAAI,cAAc,GAAG,IAAI,CAAC;gBAC7B,IAAI,UAAU,GAAG,IAAI,CAAC;qCACD,MAAM,KAAK,IAAI;2CACT,SAAS,EAAE,KAAK,IAAI;uCACxB,SAAS,EAAE,KAAK,IAAI;CA+HxD,CAAA"}

package/dist/index.js

@@ -11,7 +11,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
 import { StreamLanguage } from "@codemirror/language";
-import { keymap, MatchDecorator, Decoration, ViewPlugin, EditorView as EditorView$1, lineNumbers } from "@codemirror/view";
+import { MatchDecorator, Decoration, ViewPlugin, EditorView as EditorView$1, lineNumbers, keymap } from "@codemirror/view";
 import { StateEffect } from "@codemirror/state";
 import { EditorView } from "codemirror";
 import { tags } from "@lezer/highlight";
@@ -3856,7 +3856,7 @@ const yaml = {
     commentTokens: { line: "#" }
   }
 };
-const lightTheme = createTheme({
+const customTheme = createTheme({
   theme: "light",
   settings: {
     background: "var(--theme-background-2, var(--default-theme-background-2))",
@@ -3942,95 +3942,8 @@ const lightTheme = createTheme({
     }
   ]
 });
-const darkTheme = createTheme({
-  theme: "dark",
-  settings: {
-    background: "var(--theme-background-2, var(--default-theme-background-2))",
-    foreground: "var(--theme-color-1, var(--default-theme-color-1))",
-    caret: "var(--theme-color-1, var(--default-theme-color-1))",
-    selection: "var(--theme-background-3, var(--default-theme-background-3))",
-    selectionMatch: "#e3dcce",
-    gutterBackground: "var(--theme-background-2, var(--default-theme-background-2))",
-    gutterForeground: "var(--theme-color-3, var(--default-theme-color-3))",
-    gutterBorder: "transparent",
-    lineHighlight: "var(--theme-background-3, var(--default-theme-background-3))",
-    fontFamily: "var(--theme-font-code, var(--default-theme-font-code))"
-  },
-  styles: [
-    {
-      tag: [tags.standard(tags.tagName), tags.tagName],
-      color: "var(--theme-color-purple, var(--default-theme-color-purple))"
-    },
-    {
-      tag: [tags.comment],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags.className],
-      color: "var(--theme-color-orange, var(--default-theme-color-orange))"
-    },
-    {
-      tag: [tags.variableName, tags.propertyName, tags.attributeName],
-      color: "var(--theme-color-1, var(--default-theme-color-1))"
-    },
-    {
-      tag: [tags.operator],
-      color: "var(--theme-color-2, var(--default-theme-color-2))"
-    },
-    {
-      tag: [tags.keyword, tags.typeName, tags.typeOperator],
-      color: "var(--theme-color-green, var(--default-theme-color-green))"
-    },
-    {
-      tag: [tags.string],
-      color: "var(--theme-color-blue, var(--default-theme-color-blue))"
-    },
-    {
-      tag: [tags.bracket, tags.regexp, tags.meta],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags.number],
-      color: "var(--theme-color-blue, var(--default-theme-color-blue))"
-    },
-    {
-      tag: [tags.name, tags.quote],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags.heading],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      fontWeight: "bold"
-    },
-    {
-      tag: [tags.emphasis],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      fontStyle: "italic"
-    },
-    {
-      tag: [tags.deleted],
-      color: "var(--theme-color-3, var(--default-theme-color-3))",
-      backgroundColor: "transparent"
-    },
-    {
-      tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    },
-    {
-      tag: [tags.url, tags.escape, tags.regexp, tags.link],
-      color: "var(--theme-color-1, var(--default-theme-color-1))"
-    },
-    { tag: tags.link, textDecoration: "underline" },
-    { tag: tags.strikethrough, textDecoration: "line-through" },
-    {
-      tag: tags.invalid,
-      color: "var(--theme-color-3, var(--default-theme-color-3))"
-    }
-  ]
-});
-const isDark = ref(false);
 const useCodeMirror = (parameters) => {
-  const { extensions, content, forceDarkMode, forceLightMode, withoutTheme } = parameters;
+  const { extensions, content, withoutTheme } = parameters;
   const value = ref(content ?? "");
   const codeMirrorRef = ref(null);
   const codeMirror = ref(null);
@@ -4050,55 +3963,20 @@ const useCodeMirror = (parameters) => {
       codeMirror.value = new EditorView(configuration);
     }
   };
-  const getCurrentTheme = () => {
-    if (withoutTheme) {
-      return null;
-    }
-    if (forceDarkMode) {
-      return darkTheme;
-    }
-    if (forceLightMode) {
-      return lightTheme;
-    }
-    if (isDark.value) {
-      return darkTheme;
-    }
-    return lightTheme;
-  };
   const addDefaultExtensions = (newExtensions = []) => {
-    const selectAllKeyBinding = {
-      key: "Mod-a",
-      run: (view) => {
-        view.dispatch({
-          selection: { anchor: 0, head: view.state.doc.length },
-          scrollIntoView: false
-        });
-        return true;
-      }
-    };
     const defaultExtensions = [
-      EditorView.theme(
-        {
-          ".cm-line": {
-            lineHeight: "20px"
-          },
-          ".cm-gutterElement": {
-            lineHeight: "20px"
-          }
+      withoutTheme ? null : customTheme,
+      EditorView.theme({
+        ".cm-line": {
+          lineHeight: "20px"
         },
-        { dark: forceDarkMode ? false : isDark.value }
-      ),
-      keymap.of([selectAllKeyBinding]),
-      getCurrentTheme()
+        ".cm-gutterElement": {
+          lineHeight: "20px"
+        }
+      })
     ].filter((extension) => extension !== null);
     return [...defaultExtensions, newExtensions];
   };
-  watch(isDark, () => {
-    const { extensions: configuredExtensions } = parameters;
-    if (!forceDarkMode) {
-      reconfigureCodeMirror(configuredExtensions);
-    }
-  });
   const destroyCodeMirror = () => {
     var _a;
     (_a = codeMirror.value) == null ? void 0 : _a.destroy();
@@ -4210,8 +4088,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     withVariables: { type: Boolean },
     lineNumbers: { type: Boolean },
     withoutTheme: { type: Boolean },
-    disableEnter: { type: Boolean, default: false },
-    forceDarkMode: { type: Boolean, default: false }
+    disableEnter: { type: Boolean, default: false }
   },
   emits: ["change"],
   setup(__props, { expose: __expose, emit }) {
@@ -4307,8 +4184,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = useCodeMirror({
       content: props.content ?? "",
       extensions: getCodeMirrorExtensions(),
-      withoutTheme: props.withoutTheme,
-      forceDarkMode: props.forceDarkMode
+      withoutTheme: props.withoutTheme
     });
     watch(
       () => props.content,
@@ -4325,7 +4201,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       [
         () => props.disableEnter,
-        () => props.forceDarkMode,
         () => props.languages,
         () => props.lineNumbers,
         () => props.readOnly,

package/dist/style.css

@@ -15,6 +15,8 @@
   max-width: 100%;
   cursor: text;
   font-size: var(--theme-small, var(--default-theme-small));
+  /* Don't scale wide text on mobile because we let it scroll */
+  -webkit-text-size-adjust: 100%;
 }
 
 /** URL input */

package/dist/themes/index.d.ts

@@ -1,3 +1,2 @@
-export declare const lightTheme: import("@codemirror/state").Extension;
-export declare const darkTheme: import("@codemirror/state").Extension;
+export declare const customTheme: import("@codemirror/state").Extension;
 //# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,uCAuFrB,CAAA;AAEF,eAAO,MAAM,SAAS,uCAuFpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,uCAuFtB,CAAA"}

package/package.json

@@ -11,7 +11,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.7.19",
+  "version": "0.7.21",
   "engines": {
     "node": ">=18"
   },
@@ -34,7 +34,7 @@
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitest/coverage-v8": "^0.34.4",
     "tsc-alias": "^1.8.8",
-    "vite": "^4.4.12",
+    "vite": "^4.5.2",
     "vitest": "^0.34.4",
     "vue": "^3.3.0",
     "vue-tsc": "^1.8.19"