Find solution for WYSIWYG editor HTML sanitize

- Tried DOMPurify (isomorphic-dompurify) and stumbled that nextjs
  hydration has error message `window` undefined or other errors.
  kkomelin/isomorphic-dompurify#228

- Thus still use `dangerouslySetInnerHTML` and do sanitize on server
  side. This requires something like a directus hook extension:
  https://github.com/licitdev/directus-extension-sanitize-html

  There are some issues upstream, so I made my fork version and install
  it locally (not pushed online yet):

  - Manually build locally and copy `package.json` and `dist` folder to
    `directus/extensions/directus-extension-sanitize-html` volume.

  - The env variables must be sync with directus collection settings,
    current the collection (e.g., Facts) sanitizes ALL string fields.

- Memo some interface setting of WYSIWYG UI, I do this setting for every
  field, didn't find a way to reuse.

README.md

@@ -61,6 +61,35 @@ pnpm cms-log
 pnpm cms-stop
 ```
 
+Install extensions:
+
+- https://github.com/licitdev/directus-extension-sanitize-html
+
+General WYSIWYG field settings:
+
+- Custom Formats:
+
+```json
+[
+  {
+    "title": "等寬字",
+    "inline": "span",
+    "classes": "font-mono"
+  }
+]
+```
+
+- Options Overrides
+
+```json
+{
+  "force_p_newlines": false,
+  "fix_list_elements": true,
+  "invalid_elements": "img,h1,h2,h3,h4,h5,h6",
+  "content_style": "p { padding-block: 0.25rem; } .font-mono { font-family: monospace; }"
+}
+```
+
 Schema export: http://localhost:8044/schema/snapshot?export=yaml
 
 Key can be generated by `openssl rand -base64 36`

directus/docker-compose.yml

@@ -18,6 +18,8 @@ services:
       # CORS_ENABLED: true
       # CORS_ORIGIN: true
       # PUBLIC_URL: /feeders-cms
+      EXT_SANITIZE_HTML_EVENT_SCOPES: "Facts.items.create,Facts.items.update"
+      EXT_SANITIZE_HTML_ALLOWED_TAGS: "p,a,b,i,em,strong,blockquote,div,span,hr,ol,ul,li,br,code,kbd"
     secrets:
       - secret
 

src/app/facts/Timeline.tsx

@@ -35,8 +35,8 @@ function Fact({ fact }: {
 
   return (
     <div className='px-1 pl-3 py-1 relative group rounded ring-slate-700/20'>
-      <div className='flex items-center rounded group-hover:bg-white group-hover:ring ring-slate-200'>
-        <div id={anchor} className='font-mono text-sm relative flex items-center whitespace-nowrap ml-px mr-1 px-px rounded-md ring-1 bg-gradient-to-br from-amber-300/50 to-amber-300/40'>
+      <div className='flex items-center py-1 group-hover:bg-slate-100 group-hover:ring ring-slate-200'>
+        <div id={anchor} className='font-mono text-sm relative flex items-center whitespace-nowrap ml-px mr-1 px-1 rounded-md ring-1 text-red-950 bg-gradient-to-br from-amber-200 to-amber-200/80'>
           <a className='absolute flex items-center justify-center size-3 drop-shadow z-20 -left-[15px] text-opacity-0 group-hover:text-opacity-100 text-black bg-slate-100 border border-slate-400 rounded-full' href={`#${anchor}`}>#</a>
           <div>
             {date}{datePadEnd}