Dispatch event on input change

assets/trix/stylesheets/functions.js

@@ -1,18 +1,18 @@
-const path = require("path")
-const fs   = require("fs")
-const sass = require("node-sass")
-const { optimize } = require("svgo")
+import path from "path"
+import fs from "fs"
+import sass from "sass"
+import { optimize } from "svgo"
 
 const types = sass.types
 const basePath = "./assets/"
 
-module.exports = {
+export default {
   "svg($svgFileName)": function (svgFileName) {
-      const filename = path.resolve(basePath, svgFileName.getValue())
+    const filename = path.resolve(basePath, svgFileName.getValue())
 
-      let svgContent = fs.readFileSync(filename, "utf8")
-      svgContent = optimize(svgContent, { multipass: true, datauri: "enc" })
+    let svgContent = fs.readFileSync(filename, "utf8")
+    svgContent = optimize(svgContent, { multipass: true, datauri: "enc" })
 
-      return new types.String(`url("${svgContent.data}")`)
+    return new types.String(`url("${svgContent.data}")`)
   }
 }

package.json

@@ -1,16 +1,17 @@
 {
   "name": "@ernestasthedev/trix",
-  "version": "2.1.7",
+  "version": "1.0.2",
   "description": "A fork from basecamp/trix, adding controlled initialization and link related improvements",
-  "main": "dist/trix.esm.min/trix.js",
   "module": "dist/trix.esm.min/trix.js",
   "style": "dist/trix.css",
   "files": [
     "dist/*.css",
     "dist/*.js",
     "dist/*.map",
+    "dist/trix.esm.min/*.js",
     "src/{inspector,trix}/*.js"
   ],
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/volstas/trix-ssr.git"
@@ -43,20 +44,20 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-qunit": "^4.1.2",
     "karma-sauce-launcher": "^4.3.6",
-    "node-sass": "^7.0.1",
     "qunit": "2.19.1",
     "rangy": "^1.3.0",
     "rollup": "^2.56.3",
     "rollup-plugin-includepaths": "^0.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.80.1",
     "svgo": "^2.8.0",
     "webdriverio": "^7.19.5"
   },
   "resolutions": {
     "webdriverio": "^7.19.5"
   },
   "scripts": {
-    "build-css": "node-sass --functions=./assets/trix/stylesheets/functions assets/trix.scss dist/trix.css",
+    "build-css": "sass --load-path=./assets/trix/stylesheets/functions assets/trix.scss:dist/trix.css",
     "build-js": "rollup -c",
     "build-assets": "cp -f assets/*.html dist/",
     "build": "yarn run build-js && yarn run build-css && yarn run build-assets",

src/trix/elements/trix_editor_element.js

@@ -450,6 +450,7 @@ export default class TrixEditorElement extends HTMLElement {
 
   set value(defaultValue) {
     this.defaultValue = defaultValue
+    this.inputElement.dispatchEvent(new Event('input', { bubbles: true }))
     this.editor?.loadHTML(this.defaultValue)
   }