feat: make hash link work without disable clobbering

Author: pd4d10

packages/bytemd/src/types.ts

@@ -102,10 +102,7 @@ export interface ViewerProps {
   /**
    * Customize the default sanitize schema
    *
-   * Defaults to GitHub style sanitation except:
-   *
-   * 1. `className` is allowed
-   * 2. `id` is kept as is without clobbering
+   * Defaults to GitHub style sanitation except the `className` property is allowed
    *
    * https://github.com/syntax-tree/hast-util-sanitize/blob/main/lib/github.json
    */

packages/bytemd/src/utils.ts

@@ -27,7 +27,6 @@ export function getProcessor({
 
   let schema = JSON.parse(schemaStr) as Schema;
   schema.attributes!['*'].push('className'); // Add className
-  schema.clobber = schema.clobber!.filter((vs) => vs !== 'id'); // Keep id as is
   if (sanitize) schema = sanitize(schema);
 
   p = p.use(rehypeSanitize, schema);

packages/bytemd/src/viewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { BytemdPlugin, ViewerProps } from './types';
-  import { tick, onDestroy } from 'svelte';
+  import { tick, onDestroy, onMount } from 'svelte';
   import { getProcessor } from './utils';
 
   export let value: ViewerProps['value'] = '';
@@ -17,6 +17,18 @@
     cbs.forEach((cb) => cb && cb());
   }
 
+  onMount(() => {
+    el.addEventListener('click', (e) => {
+      const $ = e.target as HTMLElement;
+      if ($.tagName !== 'A') return;
+
+      const href = $.getAttribute('href');
+      if (!href?.startsWith('#')) return;
+
+      el.querySelector('#user-content-' + href.slice(1))?.scrollIntoView();
+    });
+  });
+
   onDestroy(off);
   $: result = getProcessor({ plugins, sanitize }).processSync(value);
   $: if (result && plugins) {