types and underline support

README.md

@@ -7,6 +7,12 @@ Created this to solve a few issues for my use case. Specifically when working on
 3. Now when adding a link, if you didn't preselect text, it will use the link without protocol as text. So e.g. before https://example.com would be rendered as that, but now it is example.com that links to https://example.com
 4. Now the protocol is not required for linking, e.g. input of example.com will link to https://example.com, and [email protected] will link to mailto:[email protected]
 5. Fixed a bug where the toolbar would show up as default even when there's a custom toolbar set, specifically solves the need for this hack https://dev.to/konnorrogers/modifying-the-default-toolbar-in-trix-411b
+6. Now when trix-editor is bound to an input, the input will emit an 'input' event whenever it is programmatically changed. This fixes reactivity in modern frameworks, allowing you to bind to the inputs value.
+7. Added some simple types definitions for typescript environment imports. Might publish full types to separate @types package at some point.
+8. Added underline formatting support.
+
+Currently the css built from this is likely broken, the original package was using long deprecated node-sass package that did not work with JavaScript modules.
+I upgraded this to use the Dart Sass package but did not port the custom functions logic. It should be completely fine to use the css from the original package or just use your own. e.g. I do not important pacakge css and use tailwind.
 
 Original docs:
 

index.d.ts

@@ -0,0 +1,31 @@
+declare global {
+    interface Window {
+        Trix: {
+            VERSION: string;
+            config: any;
+            core: any;
+            models: any;
+            views: any;
+            controllers: any;
+            observers: any;
+            operations: any;
+            elements: any;
+        }
+    }
+}
+
+declare namespace _default {
+    function init(): Promise<{
+        VERSION: any;
+        config: any;
+        core: any;
+        models: any;
+        views: any;
+        controllers: any;
+        observers: any;
+        operations: any;
+        elements: any;
+        filters: any;
+    }>;
+}
+export default _default;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ernestasthedev/trix",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "A fork from basecamp/trix, adding controlled initialization and link related improvements",
   "module": "dist/trix.esm.min/trix.js",
   "style": "dist/trix.css",
@@ -9,7 +9,8 @@
     "dist/*.js",
     "dist/*.map",
     "dist/trix.esm.min/*.js",
-    "src/{inspector,trix}/*.js"
+    "src/{inspector,trix}/*.js",
+    "index.d.ts"
   ],
   "type": "module",
   "repository": {

src/trix/config/lang.js

@@ -9,6 +9,7 @@ export default {
   heading1: "Heading",
   indent: "Increase Level",
   italic: "Italic",
+  underline: "Underline",
   link: "Link",
   numbers: "Numbers",
   outdent: "Decrease Level",

src/trix/config/text_attributes.js

@@ -17,6 +17,14 @@ export default {
       return style.fontStyle === "italic"
     },
   },
+  underline: {
+    tagName: "u",
+    inheritable: true,
+    parser(element) {
+      const style = window.getComputedStyle(element)
+      return style.textDecoration === "underline"
+    },
+  },
   href: {
     groupTagName: "a",
     attributes: { target: "_blank" },

src/trix/config/toolbar.js

@@ -6,6 +6,7 @@ export default {
       <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
         <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${lang.bold}" tabindex="-1">${lang.bold}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${lang.italic}" tabindex="-1">${lang.italic}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-underline" data-trix-attribute="underline" title="${lang.underline}" tabindex="-1">${lang.underline}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${lang.strike}" tabindex="-1">${lang.strike}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="${lang.link}" tabindex="-1">${lang.link}</button>
       </span>