Break links on long lines (#89)

davidmyersdev · Sep 20, 2024 · b2c3621 · b2c3621
2 parents 8591933 + 7d22484
commit b2c3621
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/.github/actions/install-dependencies/action.yml b/.github/actions/install-dependencies/action.yml
@@ -3,13 +3,12 @@ description: Install with cached dependencies
 runs:
   using: composite
   steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 18
-    - uses: pnpm/action-setup@v2.4.0
+    - uses: pnpm/action-setup@v4
       with:
         run_install: false
-        version: 8
     - shell: bash
       run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
     - uses: actions/cache@v3

diff --git a/examples/demo.ts b/examples/demo.ts
@@ -12,8 +12,11 @@ declare global {
   }
 }
 
+const url = new URL(window.location.href)
+const doc = url.searchParams.get('doc') ?? example
+
 window.ink = ink(document.getElementById('app')!, {
-  doc: example,
+  doc,
   files: {
     clipboard: true,
     dragAndDrop: true,
@@ -29,6 +32,13 @@ window.ink = ink(document.getElementById('app')!, {
     },
     injectMarkup: true,
   },
+  hooks: {
+    afterUpdate: (text) => {
+      url.searchParams.set('doc', text)
+
+      window.history.replaceState(null, '', url)
+    },
+  },
   interface: {
     images: true,
     lists: true,
@@ -55,3 +65,5 @@ const toggleTheme = (theme: Values.Appearance) => {
 window.auto = toggleTheme.bind(undefined, 'auto')
 window.dark = toggleTheme.bind(undefined, 'dark')
 window.light = toggleTheme.bind(undefined, 'light')
+
+toggleTheme('light')
diff --git a/index.html b/index.html
@@ -19,10 +19,18 @@
 
         margin: 0;
       }
+
+      @media (prefers-color-scheme: dark) {
+        .auto {
+          background-color: #222;
+          color: white;
+        }
+      }
     </style>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/examples/web-component.ts"></script>
+    <script type="module" src="/examples/demo.ts"></script>
+    <!-- <script type="module" src="/examples/web-component.ts"></script> -->
   </body>
 </html>
diff --git a/src/editor/extensions/theme.ts b/src/editor/extensions/theme.ts
@@ -137,10 +137,12 @@ export const theme = (): Extension => {
       {
         tag: tags.link,
         color: 'var(--ink-internal-syntax-link-color)',
+        wordBreak: 'break-all',
       },
       {
         tag: tags.url,
         color: 'var(--ink-internal-syntax-url-color)',
+        wordBreak: 'break-all',
       },
       // string group
       {