[ { "path": ".eslintrc", "content": "{\n \"parser\": \"babel-eslint\",\n \"extends\": \"eslint:recommended\",\n \"rules\": {\n \"array-bracket-spacing\": [\"error\", \"always\"],\n \"block-spacing\": [\"error\", \"always\"],\n \"camelcase\": [\"error\"],\n \"comma-spacing\": [\"error\"],\n \"curly\": [\"error\", \"multi-line\"],\n \"dot-notation\": [\"error\"],\n \"eol-last\": [\"error\"],\n \"getter-return\": [\"error\"],\n \"id-length\": [\"error\", { \"properties\": \"never\", \"exceptions\": [\"_\", \"i\", \"j\", \"n\"] }],\n \"keyword-spacing\": [\"error\"],\n \"no-extra-parens\": [\"error\"],\n \"no-multi-spaces\": [\"error\", { \"exceptions\": { \"VariableDeclarator\": true } }],\n \"no-multiple-empty-lines\": [\"error\", { \"max\": 2 }],\n \"no-restricted-globals\": [\"error\", \"event\"],\n \"no-trailing-spaces\": [\"error\"],\n \"no-unused-vars\": [\"error\", { \"vars\": \"all\", \"args\": \"none\" }],\n \"no-var\": [\"error\"],\n \"object-curly-spacing\": [\"error\", \"always\"],\n \"prefer-const\": [\"error\"],\n \"quotes\": [\"error\", \"double\"],\n \"semi\": [\"error\", \"never\"],\n \"sort-imports\": [\"error\", { \"ignoreDeclarationSort\": true }]\n },\n \"ignorePatterns\": [\"dist/**/*.js\", \"**/vendor/**/*.js\", \"action_text-trix/**/*.js\"],\n \"globals\": {\n \"after\": true,\n \"getComposition\": true,\n \"getDocument\": true,\n \"getEditor\": true,\n \"getEditorController\": true,\n \"getEditorElement\": true,\n \"getSelectionManager\": true,\n \"getToolbarElement\": true,\n \"QUnit\": true,\n \"rangy\": true,\n \"Trix\": true\n },\n \"env\": {\n \"browser\": true,\n \"node\": true,\n \"es6\": true\n }\n}\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "Describe the bug or issue here…\n\n##### Steps to Reproduce\n\n1. \n2. \n3. \n\n##### Details\n\n* Trix version: \n* Browser name and version:\n* Operating system: \n" }, { "path": ".github/stale.yml", "content": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 90\n# Number of days of inactivity before a stale issue is closed\ndaysUntilClose: 7\n# Issues with these labels will never be considered stale\nexemptLabels:\n - bug\n - enhancement\n - pinned\n - security\n - WIP\n# Label to use when marking an issue as stale\nstaleLabel: stale\n# Comment to post when marking an issue as stale. Set to `false` to disable\nmarkComment: >\n This issue has been automatically marked as stale after 90 days of inactivity.\n It will be closed if no further activity occurs.\npulls:\n markComment: >\n This pull request has been automatically marked as stale after 90 days of inactivity.\n It will be closed if no further activity occurs.\n# Comment to post when closing a stale issue. Set to `false` to disable\ncloseComment: false\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\nconcurrency:\n group: \"${{github.workflow}}-${{github.ref}}\"\n cancel-in-progress: true\n\non:\n workflow_dispatch:\n push:\n branches: [ main ]\n pull_request:\n types: [opened, synchronize]\n branches: [ '*' ]\n\nenv:\n SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}\n SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}\n SAUCE_REGION: us\n SAUCE_TUNNEL_IDENTIFIER: trix-${{ github.run_id }}\n\njobs:\n build:\n name: Browser tests\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n cache: \"yarn\"\n - name: Install Dependencies\n run: yarn install --frozen-lockfile\n - name: Start Sauce Connect\n if: ${{ env.SAUCE_ACCESS_KEY != '' }}\n uses: saucelabs/sauce-connect-action@v3\n with:\n username: ${{ env.SAUCE_USERNAME }}\n accessKey: ${{ env.SAUCE_ACCESS_KEY }}\n tunnelName: ${{ env.SAUCE_TUNNEL_IDENTIFIER }}\n region: ${{ env.SAUCE_REGION }}\n proxyLocalhost: allow\n - name: Install Playwright Browsers\n if: ${{ env.SAUCE_ACCESS_KEY == '' }}\n run: npx playwright install --with-deps chromium\n - run: bin/ci\n - name: Fail when generated npm changes are not checked-in\n run: |\n git update-index --refresh && git diff-index --quiet HEAD --\n\n rails-tests:\n name: Downstream Rails integration tests\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n cache: \"yarn\"\n - uses: ruby/setup-ruby-pkgs@v1\n with:\n ruby-version: \"3.4\"\n apt-get: libvips-tools\n - name: Install Dependencies\n run: yarn install --frozen-lockfile\n - name: Packaging\n run: yarn build\n - name: Clone Rails\n run: git clone --depth=1 https://github.com/rails/rails\n - name: Configure Rails\n run: |\n cd rails\n yarn install --frozen-lockfile\n bundle add action_text-trix --path \"..\"\n bundle show --paths action_text-trix\n - name: Action Text tests\n env:\n RACK_ENV: test # see https://github.com/rails/rails/issues/56563\n run: |\n cd rails/actiontext\n bundle exec rake test test:system\n action_text-trix:\n name: Action Text tests\n runs-on: ubuntu-latest\n strategy:\n fail-fast: false\n matrix:\n include:\n - ruby: \"3.2\"\n rails_branch: 7-2-stable\n - ruby: \"3.3\"\n rails_branch: 7-2-stable\n - ruby: \"3.4\"\n rails_branch: 7-2-stable\n\n - ruby: \"3.2\"\n rails_branch: 8-0-stable\n - ruby: \"3.3\"\n rails_branch: 8-0-stable\n - ruby: \"3.4\"\n rails_branch: 8-0-stable\n\n - ruby: \"3.2\"\n rails_branch: 8-1-stable\n - ruby: \"3.3\"\n rails_branch: 8-1-stable\n - ruby: \"3.4\"\n rails_branch: 8-1-stable\n - ruby: \"4.0\"\n rails_branch: 8-1-stable\n\n - ruby: \"3.3\"\n rails_branch: main\n experimental: true\n - ruby: \"3.4\"\n rails_branch: main\n experimental: true\n - ruby: \"4.0\"\n rails_branch: main\n experimental: true\n\n - ruby: head\n rails_branch: main\n experimental: true\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n cache: \"yarn\"\n - uses: ruby/setup-ruby@v1\n env:\n RAILS_BRANCH: ${{ matrix.rails_branch }}\n with:\n working-directory: \"./action_text-trix\"\n ruby-version: ${{ matrix.ruby }}\n bundler-cache: true\n - name: Run tests\n env:\n RAILS_BRANCH: ${{ matrix.rails_branch }}\n continue-on-error: ${{ matrix.experimental || false }}\n working-directory: \"./action_text-trix\"\n run: bin/rails test:all\n" }, { "path": ".gitignore", "content": "yarn-error.log\npackage-lock.json\n/dist\n/node_modules\n/tmp\n" }, { "path": ".node-version", "content": "18.18.0\n" }, { "path": ".npmignore", "content": ".DS_Store\n/node_modules\n/.github\n/bin\n/assets\nyarn-error.log\nyarn.lock\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\nadvances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the [project maintainers](#project-maintainers). All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Project Maintainers\n\n* Javan Makhmali <>\n* Sam Stephenson <>\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n" }, { "path": "LICENSE", "content": "Copyright (c) 37signals, LLC\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "# Trix\n### A Rich Text Editor for Everyday Writing\n\n**Compose beautifully formatted text in your web application.** Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.\n\nTrix is an open-source project from [37signals](https://37signals.com), the creators of [Ruby on Rails](http://rubyonrails.org/). Millions of people trust their text to us, and we built Trix to give them the best possible editing experience. See Trix in action in [Basecamp](https://basecamp.com).\n\n### Different By Design\n\nWhen Trix was designed in 2014, most WYSIWYG editors were wrappers around HTML’s `contenteditable` and `execCommand` APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and [eventually reverse-engineered](https://blog.whatwg.org/the-road-to-html-5-contenteditable#history) and copied by other browsers.\n\nBecause these APIs were not fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.\n\nTrix sidestepped these inconsistencies by treating `contenteditable` as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use `execCommand` at all.\n\nThis is the approach that all modern, production ready, WYSIWYG editors now take.\n\n### Built on Web standards\n\n
Trix supports all evergreen, self-updating desktop and mobile browsers.
\n\nTrix is built with established web standards, notably [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), [Mutation Observer](https://dom.spec.whatwg.org/#mutation-observers), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).\n\n# Getting Started\n\nTrix comes bundled in ESM and UMD formats and works with any asset packaging system.\n\nThe easiest way to start with Trix is including it from an npm CDN in the `` of your page:\n\n```html\n\n …\n \n \n\n```\n\n`trix.css` includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.\n\nAlternatively, you can install the npm package and import it in your application:\n\n```js\nimport Trix from \"trix\"\n\ndocument.addEventListener(\"trix-before-initialize\", () => {\n // Change Trix.config if you need\n})\n```\n\n## Creating an Editor\n\nPlace an empty `` tag on the page. Trix will automatically insert a separate `` before the editor.\n\nLike an HTML `\n \n \n \n\n" }, { "path": "assets/test.html", "content": "\n\nTest Suite\n\n\n\n\n
\n
\n \n \n\n" }, { "path": "assets/trix/images/README.md", "content": "# Trix Icons\n\nTrix's toolbar uses [Material Design Icons by Google][1], which are licensed under the [Creative Commons Attribution 4.0 International License (CC-BY 4.0)][2]. Some icons have been modified.\n\n[1]: https://github.com/google/material-design-icons\n[2]: https://github.com/google/material-design-icons/blob/master/LICENSE\n" }, { "path": "assets/trix/stylesheets/attachments.scss", "content": "@import \"./icons\";\n@import \"./selection\";\n\ntrix-editor {\n [data-trix-mutable],\n [data-trix-cursor-target] {\n @extend %invisible-selection;\n }\n\n [data-trix-mutable] {\n * {\n @extend %invisible-selection;\n }\n\n &:not(.attachment__caption-editor) {\n @extend %disable-selection;\n }\n\n &.attachment__caption-editor:focus {\n @extend %visible-selection;\n }\n\n &.attachment {\n &.attachment--file {\n box-shadow: 0 0 0 2px highlight;\n border-color: transparent;\n }\n\n img {\n box-shadow: 0 0 0 2px highlight;\n }\n }\n }\n\n .attachment {\n position: relative;\n\n &:hover {\n cursor: default;\n }\n }\n\n .attachment--preview {\n .attachment__caption:hover {\n cursor: text;\n }\n }\n\n .attachment__progress {\n position: absolute;\n z-index: 1;\n height: 20px;\n top: calc(50% - 10px);\n left: 5%;\n width: 90%;\n opacity: 0.9;\n transition: opacity 200ms ease-in;\n\n &[value=\"100\"] {\n opacity: 0;\n }\n }\n\n .attachment__caption-editor {\n display: inline-block;\n width: 100%;\n margin: 0;\n padding: 0;\n font-size: inherit;\n font-family: inherit;\n line-height: inherit;\n color: inherit;\n text-align: center;\n vertical-align: top;\n border: none;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n\n .attachment__toolbar {\n position: absolute;\n z-index: 1;\n top: -0.9em;\n left: 0;\n width: 100%;\n text-align: center;\n }\n\n .trix-button-group {\n display: inline-flex;\n }\n\n .trix-button {\n position: relative;\n float: left; // Collapse whitespace between elements\n color: #666;\n white-space: nowrap;\n font-size: 80%;\n padding: 0 0.8em;\n margin: 0;\n outline: none;\n border: none;\n border-radius: 0;\n background: transparent;\n\n &:not(:first-child) {\n border-left: 1px solid #ccc;\n }\n\n &.trix-active {\n background: #cbeefa;\n }\n\n &:not(:disabled) {\n cursor: pointer;\n }\n }\n\n .trix-button--remove {\n text-indent: -9999px;\n display: inline-block;\n padding: 0;\n outline: none;\n width: 1.8em;\n height: 1.8em;\n line-height: 1.8em;\n border-radius: 50%;\n background-color: #fff;\n border: 2px solid highlight;\n box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);\n\n &::before {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0.7;\n content: \"\";\n background-image: $icon-remove;\n background-position: center;\n background-repeat: no-repeat;\n background-size: 90%;\n }\n\n &:hover {\n border-color: #333;\n\n &::before {\n opacity: 1;\n }\n }\n }\n\n .attachment__metadata-container {\n position: relative;\n }\n\n .attachment__metadata {\n position: absolute;\n left: 50%;\n top: 2em;\n transform: translate(-50%, 0);\n max-width: 90%;\n padding: 0.1em 0.6em;\n font-size: 0.8em;\n color: #fff;\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 3px;\n\n .attachment__name {\n display: inline-block;\n max-width: 100%;\n vertical-align: bottom;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .attachment__size {\n margin-left: 0.2em;\n white-space: nowrap;\n }\n }\n}\n" }, { "path": "assets/trix/stylesheets/content.scss", "content": "$quote-border-width: 0.3em;\n$quote-margin-start: 0.3em;\n$quote-padding-start: 0.6em;\n\n.trix-content {\n line-height: 1.5;\n overflow-wrap: break-word;\n word-break: break-word;\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n h1 {\n font-size: 1.2em;\n line-height: 1.2;\n }\n\n blockquote {\n border: 0 solid #ccc;\n border-left-width: $quote-border-width;\n margin-left: $quote-margin-start;\n padding-left: $quote-padding-start;\n }\n\n [dir=rtl] blockquote,\n blockquote[dir=rtl] {\n border-width: 0;\n border-right-width: $quote-border-width;\n margin-right: $quote-margin-start;\n padding-right: $quote-padding-start;\n }\n\n li {\n margin-left: 1em;\n }\n\n [dir=rtl] li {\n margin-right: 1em;\n }\n\n pre {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n font-family: monospace;\n font-size: 0.9em;\n padding: 0.5em;\n white-space: pre;\n background-color: #eee;\n overflow-x: auto;\n }\n\n img {\n max-width: 100%;\n height: auto;\n }\n\n .attachment {\n display: inline-block;\n position: relative;\n max-width: 100%;\n\n a {\n color: inherit;\n text-decoration: none;\n\n &:hover,\n &:visited:hover {\n color: inherit;\n }\n }\n }\n\n .attachment__caption {\n text-align: center;\n\n .attachment__name + .attachment__size {\n &::before {\n content: ' \\2022 ';\n }\n }\n }\n\n .attachment--preview {\n width: 100%;\n text-align: center;\n\n .attachment__caption {\n color: #666;\n font-size: 0.9em;\n line-height: 1.2;\n }\n }\n\n .attachment--file {\n color: #333;\n line-height: 1;\n margin: 0 2px 2px 2px;\n padding: 0.4em 1em;\n border: 1px solid #bbb;\n border-radius: 5px;\n }\n\n .attachment-gallery {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .attachment {\n flex: 1 0 33%;\n padding: 0 0.5em;\n max-width: 33%;\n }\n\n &.attachment-gallery--2,\n &.attachment-gallery--4 {\n .attachment {\n flex-basis: 50%;\n max-width: 50%;\n }\n }\n }\n}\n" }, { "path": "assets/trix/stylesheets/editor.scss", "content": "trix-editor {\n border: 1px solid #bbb;\n border-radius: 3px;\n margin: 0;\n padding: 0.4em 0.6em;\n min-height: 5em;\n outline: none;\n}\n" }, { "path": "assets/trix/stylesheets/icons.scss", "content": "$icon-attach: svg('trix/images/attach.svg');\n$icon-bold: svg('trix/images/bold.svg');\n$icon-bullets: svg('trix/images/bullets.svg');\n$icon-code: svg('trix/images/code.svg');\n$icon-heading-1: svg('trix/images/heading_1.svg');\n$icon-italic: svg('trix/images/italic.svg');\n$icon-link: svg('trix/images/link.svg');\n$icon-nesting-level-decrease: svg('trix/images/nesting_level_decrease.svg');\n$icon-nesting-level-increase: svg('trix/images/nesting_level_increase.svg');\n$icon-numbers: svg('trix/images/numbers.svg');\n$icon-quote: svg('trix/images/quote.svg');\n$icon-redo: svg('trix/images/redo.svg');\n$icon-remove: svg('trix/images/remove.svg');\n$icon-strike: svg('trix/images/strike.svg');\n$icon-undo: svg('trix/images/undo.svg');\n" }, { "path": "assets/trix/stylesheets/media-queries.scss", "content": "$phone-width: 768px;\n\n@mixin phone {\n @media (max-width: #{$phone-width}) {\n @content;\n }\n}\n" }, { "path": "assets/trix/stylesheets/selection.scss", "content": "%disable-selection {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n%invisible-selection {\n &::-moz-selection { background: none; }\n &::selection { background: none; }\n}\n\n%visible-selection {\n &::-moz-selection { background: highlight; }\n &::selection { background: highlight; }\n}\n" }, { "path": "assets/trix/stylesheets/toolbar.scss", "content": "@import \"./media-queries\";\n@import \"./icons\";\n\n$font-size-normal: 0.75em;\n$opacity-normal: 0.6;\n$opacity-disabled: 0.125;\n$opacity-active: 1;\n\ntrix-toolbar {\n * {\n box-sizing: border-box;\n }\n\n .trix-button-row {\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-between;\n overflow-x: auto;\n }\n\n .trix-button-group {\n display: flex;\n margin-bottom: 10px;\n border: 1px solid #bbb;\n border-top-color: #ccc;\n border-bottom-color: #888;\n border-radius: 3px;\n\n &:not(:first-child) {\n margin-left: 1.5vw;\n\n @include phone {\n margin-left: 0;\n }\n }\n }\n\n .trix-button-group-spacer {\n flex-grow: 1;\n\n @include phone {\n display: none;\n }\n }\n\n .trix-button {\n position: relative;\n float: left; // Collapse whitespace between elements\n color: rgba(0,0,0, $opacity-normal);\n font-size: $font-size-normal;\n font-weight: 600;\n white-space: nowrap;\n padding: 0 0.5em;\n margin: 0;\n outline: none;\n border: none;\n border-bottom: 1px solid #ddd;\n border-radius: 0;\n background: transparent;\n\n &:not(:first-child) {\n border-left: 1px solid #ccc;\n }\n\n &.trix-active {\n background: #cbeefa;\n color: rgba(0,0,0, $opacity-active);\n }\n\n &:not(:disabled) {\n cursor: pointer;\n }\n\n &:disabled {\n color: rgba(0,0,0, $opacity-disabled);\n }\n\n @include phone {\n letter-spacing: -0.01em;\n padding: 0 0.3em;\n }\n }\n\n .trix-button--icon {\n font-size: inherit;\n width: 2.6em;\n height: 1.6em;\n max-width: calc(0.8em + 4vw);\n text-indent: -9999px;\n\n @include phone {\n height: 2em;\n max-width: calc(0.8em + 3.5vw);\n }\n\n &::before {\n display: inline-block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: $opacity-normal;\n content: \"\";\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n\n @include phone {\n right: 6%;\n left: 6%;\n }\n }\n\n &.trix-active::before {\n opacity: $opacity-active;\n }\n\n &:disabled::before {\n opacity: $opacity-disabled;\n }\n }\n\n .trix-button--icon-attach::before { background-image: $icon-attach; top: 8%; bottom: 4%; }\n .trix-button--icon-bold::before { background-image: $icon-bold; }\n .trix-button--icon-italic::before { background-image: $icon-italic; }\n .trix-button--icon-link::before { background-image: $icon-link; }\n .trix-button--icon-strike::before { background-image: $icon-strike; }\n .trix-button--icon-quote::before { background-image: $icon-quote; }\n .trix-button--icon-heading-1::before { background-image: $icon-heading-1; }\n .trix-button--icon-code::before { background-image: $icon-code; }\n .trix-button--icon-bullet-list::before { background-image: $icon-bullets; }\n .trix-button--icon-number-list::before { background-image: $icon-numbers; }\n .trix-button--icon-undo::before { background-image: $icon-undo; }\n .trix-button--icon-redo::before { background-image: $icon-redo; }\n .trix-button--icon-decrease-nesting-level::before { background-image: $icon-nesting-level-decrease; }\n .trix-button--icon-increase-nesting-level::before { background-image: $icon-nesting-level-increase; }\n\n .trix-dialogs {\n position: relative;\n }\n\n .trix-dialog {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n font-size: $font-size-normal;\n padding: 15px 10px;\n background: #fff;\n box-shadow: 0 0.3em 1em #ccc;\n border-top: 2px solid #888;\n border-radius: 5px;\n z-index: 5;\n }\n\n .trix-input--dialog {\n font-size: inherit;\n font-weight: normal;\n padding: 0.5em 0.8em;\n margin: 0 10px 0 0;\n border-radius: 3px;\n border: 1px solid #bbb;\n background-color: #fff;\n box-shadow: none;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n\n &.validate:invalid {\n box-shadow: #F00 0px 0px 1.5px 1px;\n }\n }\n\n .trix-button--dialog {\n font-size: inherit;\n padding: 0.5em;\n border-bottom: none;\n }\n\n .trix-dialog--link {\n max-width: 600px;\n }\n\n .trix-dialog__link-fields {\n display: flex;\n align-items: baseline;\n\n .trix-input {\n flex: 1;\n }\n\n .trix-button-group {\n flex: 0 0 content;\n margin: 0;\n }\n }\n}\n" }, { "path": "assets/trix.scss", "content": "@import \"trix/stylesheets/editor\";\n@import \"trix/stylesheets/toolbar\";\n@import \"trix/stylesheets/attachments\";\n@import \"trix/stylesheets/content\";\n" }, { "path": "babel.config.json", "content": "{\n \"presets\": [\n [\"@babel/preset-env\",\n {\n \"targets\": {\n \"chrome\": \"80\",\n \"safari\": \"12.1\",\n \"edge\": \"80\",\n \"firefox\": \"88\"\n }\n }\n ]\n ]\n}\n" }, { "path": "bin/ci", "content": "#!/usr/bin/env bash\nset -e\n\nif [ -n \"$CI\" ]; then\n echo \"GITHUB_WORKFLOW: $GITHUB_WORKFLOW\"\n echo \"GITHUB_RUN_NUMBER: $GITHUB_RUN_NUMBER\"\n echo \"GITHUB_RUN_ID: $GITHUB_RUN_ID\"\n echo \"GITHUB_ACTOR: $GITHUB_ACTOR\"\n echo \"GITHUB_EVENT_NAME: $GITHUB_EVENT_NAME\"\n echo \"GITHUB_SHA: $GITHUB_SHA\"\n echo \"GITHUB_REF: $GITHUB_REF\"\n echo \"GITHUB_HEAD_REF: $GITHUB_HEAD_REF\"\n echo \"GITHUB_BASE_REF: $GITHUB_BASE_REF\"\nfi\n\nyarn test\n" }, { "path": "bin/sass-build", "content": "#!/usr/bin/env node\n\nconst path = require(\"path\")\nconst fs = require(\"fs\")\nconst sass = require(\"sass\")\nconst { optimize } = require(\"svgo\")\nconst chokidar = require(\"chokidar\")\n\nconst args = process.argv.slice(2)\nif (args.length < 2) {\n console.error(\"Usage: bin/sass-build (--watch)\")\n process.exit(1)\n}\nconst inputFile = path.resolve(args[0])\nconst outputFiles = args.slice(1).map(outputPath => path.resolve(outputPath))\nconst watchMode = args.includes(\"--watch\")\n\nconst basePath = path.dirname(inputFile)\n\nconst functions = {\n \"svg($file)\": (args) => {\n const fileName = args[0].assertString().text\n const filePath = path.resolve(basePath, fileName)\n\n let svgContent = fs.readFileSync(filePath, \"utf8\")\n svgContent = optimize(svgContent, { multipass: true, datauri: \"enc\" })\n\n return new sass.SassString(`url(\"${svgContent.data}\")`, { quotes: false })\n }\n}\n\nfunction compile() {\n try {\n const result = sass.compile(inputFile, { functions })\n\n outputFiles.forEach(outputFile => fs.writeFileSync(outputFile, result.css, \"utf8\"))\n } catch (error) {\n console.error(\"Error compiling SCSS:\", error.message)\n }\n}\ncompile()\n\nif (watchMode) {\n console.log(`Watching for SASS file changes under ${basePath}...`)\n chokidar.watch(basePath).on(\"change\", (filePath) => {\n if (!filePath.endsWith(\".scss\")) return\n console.log(`[${new Date().toLocaleTimeString()}] ${filePath} changed. Recompiling...`)\n compile()\n })\n}\n" }, { "path": "bin/setup", "content": "#!/usr/bin/env bash\nset -eo pipefail\n\n# Use binstubs. Work from the root dir.\napp_root=\"$( cd \"$(dirname \"$0\")/..\"; pwd )\"\n\n# Prefer bin/ executables\nexport PATH=\"$app_root/bin:$PATH\"\n\nif [ \"$1\" = \"-v\" ]; then\n exec 3>&1\nelse\n exec 3>/dev/null\n exec 4>&1\n trap 'echo \"Setup failed - run \\`bin/setup -v\\` to see the error output\" >&4' ERR\nfi\n\nbrew_install_missing() {\n if which brew > /dev/null; then\n if ! which \"$1\" > /dev/null; then\n echo \" -- Installing Homebrew package: $@\"\n brew reinstall \"$@\"\n fi\n else\n return 1\n fi\n}\n\nabort() {\n echo \"$@\"\n return 2\n}\n\necho \"--- Installing Ruby gems\"\n{\n if which rbenv > /dev/null; then\n rbenv install --skip-existing\n else\n if ! which ruby > /dev/null; then\n brew_install_missing ruby || abort \"Can't find or install Ruby. Install it from https://www.ruby-lang.org or with https://github.com/rbenv/rbenv\"\n fi\n fi\n gem list -i bundler >/dev/null 2>&1 || gem install bundler\n bundle check || bundle install\n} >&3 2>&1\n\necho \"--- Installing npm modules\"\n{\n if ! which npm > /dev/null; then\n brew_install_missing \"npm\" || abort \"Can't find or install npm. Install it from https://nodejs.org\"\n fi\n npm install\n} >&3 2>&1\n\nif [ -d \"$HOME/.pow\" ]; then\n echo \"--- Setting up Pow\"\n { ln -nfs \"$app_root\" \"$HOME/.pow/trix\"\n mkdir -p tmp\n touch tmp/restart.txt\n } >&3 2>&1\nfi\n\necho\necho \"Done!\"\nif [ -L \"$HOME/.pow/trix\" ]; then\n echo \" * Open http://trix.dev to develop in-browser\"\nelse\n echo \" * Run \\`bin/rackup\\` to develop in-browser\"\nfi\necho \" * Run \\`bin/blade build\\` to build Trix\"\n" }, { "path": "package.json", "content": "{\n \"name\": \"trix\",\n \"version\": \"2.1.17\",\n \"description\": \"A rich text editor for everyday writing\",\n \"main\": \"dist/trix.umd.min.js\",\n \"module\": \"dist/trix.esm.min.js\",\n \"style\": \"dist/trix.css\",\n \"files\": [\n \"dist/*.css\",\n \"dist/*.js\",\n \"dist/*.map\",\n \"src/{inspector,trix}/*.js\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/basecamp/trix.git\"\n },\n \"keywords\": [\n \"rich text\",\n \"wysiwyg\",\n \"editor\"\n ],\n \"author\": \"37signals, LLC\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/basecamp/trix/issues\"\n },\n \"homepage\": \"https://trix-editor.org/\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.16.0\",\n \"@babel/preset-env\": \"^7.16.4\",\n \"@rollup/plugin-babel\": \"^5.3.0\",\n \"@rollup/plugin-commonjs\": \"^22.0.2\",\n \"@rollup/plugin-json\": \"^4.1.0\",\n \"@rollup/plugin-node-resolve\": \"^13.3.0\",\n \"@web/dev-server\": \"^0.1.34\",\n \"@web/test-runner\": \"^0.20.2\",\n \"@web/test-runner-playwright\": \"^0.11.1\",\n \"@web/test-runner-webdriver\": \"^0.9.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"chokidar\": \"^4.0.2\",\n \"concurrently\": \"^7.4.0\",\n \"eslint\": \"^7.32.0\",\n \"esm\": \"^3.2.25\",\n \"idiomorph\": \"^0.7.3\",\n \"qunit\": \"2.19.1\",\n \"rangy\": \"^1.3.0\",\n \"rollup\": \"^2.56.3\",\n \"rollup-plugin-includepaths\": \"^0.2.4\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"sass\": \"^1.83.0\",\n \"source-map\": \"^0.7.6\",\n \"svgo\": \"^2.8.0\",\n \"webdriverio\": \"^7.19.5\"\n },\n \"resolutions\": {\n \"webdriverio\": \"^7.19.5\"\n },\n \"scripts\": {\n \"build-css\": \"bin/sass-build assets/trix.scss dist/trix.css action_text-trix/app/assets/stylesheets/trix.css\",\n \"build-js\": \"rollup -c\",\n \"build-assets\": \"cp -f assets/*.html dist/\",\n \"build-ruby\": \"rake -C action_text-trix sync\",\n \"build\": \"yarn run build-js && yarn run build-css && yarn run build-assets && yarn run build-ruby\",\n \"watch\": \"rollup -c -w\",\n \"lint\": \"eslint .\",\n \"pretest\": \"yarn run lint && yarn run build\",\n \"test\": \"web-test-runner\",\n \"test:watch\": \"web-test-runner --watch\",\n \"version\": \"yarn build && git add action_text-trix\",\n \"prerelease\": \"yarn version && yarn test\",\n \"release-npm\": \"npm adduser && npm publish\",\n \"release-ruby\": \"rake -C action_text-trix release\",\n \"release\": \"yarn run release-npm && yarn run release-ruby\",\n \"postrelease\": \"git push && git push --tags\",\n \"dev\": \"web-dev-server --app-index index.html --root-dir dist --node-resolve --open\",\n \"start\": \"yarn build-assets && concurrently --kill-others --names js,css,dev-server 'yarn watch' 'yarn build-css --watch' 'yarn dev'\"\n },\n \"dependencies\": {\n \"dompurify\": \"^3.2.5\"\n },\n \"engines\": {\n \"node\": \">= 18\"\n }\n}\n" }, { "path": "rollup.config.js", "content": "import json from \"@rollup/plugin-json\"\nimport includePaths from \"rollup-plugin-includepaths\"\nimport commonjs from \"@rollup/plugin-commonjs\"\nimport { babel } from \"@rollup/plugin-babel\"\nimport nodeResolve from \"@rollup/plugin-node-resolve\"\nimport { terser } from \"rollup-plugin-terser\"\n\nimport { version } from \"./package.json\"\n\nconst year = new Date().getFullYear()\nconst banner = `/*\\nTrix ${version}\\nCopyright © ${year} 37signals, LLC\\n */`\n\nconst plugins = [\n json(),\n includePaths({\n paths: [ \"src\" ],\n extensions: [ \".js\" ]\n }),\n nodeResolve({ extensions: [ \".js\" ] }),\n commonjs({\n extensions: [ \".js\" ]\n }),\n babel({ babelHelpers: \"bundled\" }),\n]\n\nconst defaultConfig = {\n context: \"window\",\n treeshake: false,\n plugins: plugins,\n watch: {\n include: \"src/**\"\n }\n}\n\nconst terserConfig = terser({\n mangle: true,\n compress: true,\n format: {\n comments: function (node, comment) {\n const text = comment.value\n const type = comment.type\n if (type == \"comment2\") {\n // multiline comment\n return /@license|Copyright/.test(text)\n }\n },\n },\n})\n\nconst compressedConfig = Object.assign({}, defaultConfig, { plugins: plugins.concat(terserConfig) })\n\nexport default [\n {\n input: \"src/trix/trix.js\",\n output: [\n {\n name: \"Trix\",\n file: \"dist/trix.umd.js\",\n format: \"umd\",\n banner\n },\n {\n file: \"dist/trix.esm.js\",\n format: \"es\",\n banner\n },\n {\n name: \"Trix\",\n file: \"action_text-trix/app/assets/javascripts/trix.js\",\n format: \"umd\",\n banner\n },\n ],\n ...defaultConfig,\n },\n {\n input: \"src/trix/trix.js\",\n output: [\n {\n name: \"Trix\",\n file: \"dist/trix.umd.min.js\",\n format: \"umd\",\n banner,\n sourcemap: true\n },\n {\n file: \"dist/trix.esm.min.js\",\n format: \"es\",\n banner,\n sourcemap: true\n }\n ],\n ...compressedConfig,\n },\n {\n input: \"src/test/test.js\",\n output: {\n name: \"TrixTests\",\n file: \"dist/test.js\",\n format: \"es\",\n sourcemap: true,\n banner\n },\n ...defaultConfig,\n },\n {\n input: \"src/inspector/inspector.js\",\n output: {\n name: \"TrixInspector\",\n file: \"dist/inspector.js\",\n format: \"es\",\n sourcemap: true,\n banner\n },\n ...defaultConfig,\n }\n]\n" }, { "path": "src/inspector/control_element.js", "content": "const KEY_EVENTS = \"keydown keypress input\".split(\" \")\nconst COMPOSITION_EVENTS = \"compositionstart compositionupdate compositionend textInput\".split(\" \")\nconst OBSERVER_OPTIONS = {\n attributes: true,\n childList: true,\n characterData: true,\n characterDataOldValue: true,\n subtree: true,\n}\n\nexport default class ControlElement {\n constructor(editorElement) {\n this.didMutate = this.didMutate.bind(this)\n this.editorElement = editorElement\n this.install()\n }\n\n install() {\n this.createElement()\n this.logInputEvents()\n this.logMutations()\n }\n\n uninstall() {\n this.observer.disconnect()\n this.element.parentNode.removeChild(this.element)\n }\n\n createElement() {\n this.element = document.createElement(\"div\")\n this.element.setAttribute(\"contenteditable\", \"\")\n this.element.style.width = getComputedStyle(this.editorElement).width\n this.element.style.minHeight = \"50px\"\n this.element.style.border = \"1px solid green\"\n this.editorElement.parentNode.insertBefore(this.element, this.editorElement.nextSibling)\n }\n\n logInputEvents() {\n KEY_EVENTS.forEach((eventName) => {\n this.element.addEventListener(eventName, (event) => console.log(`${event.type}: keyCode = ${event.keyCode}`))\n })\n\n COMPOSITION_EVENTS.forEach((eventName) => {\n this.element.addEventListener(eventName, (event) =>\n console.log(`${event.type}: data = ${JSON.stringify(event.data)}`)\n )\n })\n }\n\n logMutations() {\n this.observer = new window.MutationObserver(this.didMutate)\n this.observer.observe(this.element, OBSERVER_OPTIONS)\n }\n\n didMutate(mutations) {\n console.log(`Mutations (${mutations.length}):`)\n for (let index = 0; index < mutations.length; index++) {\n const mutation = mutations[index]\n console.log(` ${index + 1}. ${mutation.type}:`)\n switch (mutation.type) {\n case \"characterData\":\n console.log(` oldValue = ${JSON.stringify(mutation.oldValue)}, newValue = ${JSON.stringify(mutation.target.data)}`)\n break\n case \"childList\":\n Array.from(mutation.addedNodes).forEach((node) => {\n console.log(` node added ${inspectNode(node)}`)\n })\n\n Array.from(mutation.removedNodes).forEach((node) => {\n console.log(` node removed ${inspectNode(node)}`)\n })\n }\n }\n }\n}\n\nconst inspectNode = function(node) {\n if (node.data) {\n return JSON.stringify(node.data)\n } else {\n return JSON.stringify(node.outerHTML)\n }\n}\n" }, { "path": "src/inspector/debugger.js", "content": "/* eslint-disable\n id-length,\n no-empty,\n*/\n\n// This file is not included in the main Trix bundle and\n// should be explicitly required to enable the debugger.\n\nconst DEBUG_METHODS = {\n AttachmentEditorController: [\n \"didClickRemoveButton\",\n \"uninstall\",\n ],\n\n \"Trix.CompositionController\": [\n \"didClickAttachment\"\n ],\n\n EditorController: [\n \"setEditor\",\n \"loadDocument\",\n ],\n\n \"Trix.Level0InputController\": [\n \"elementDidMutate\",\n \"events.keydown\",\n \"events.keypress\",\n \"events.dragstart\",\n \"events.dragover\",\n \"events.dragend\",\n \"events.drop\",\n \"events.cut\",\n \"events.paste\",\n \"events.compositionstart\",\n \"events.compositionend\",\n ],\n\n \"Trix.Level2InputController\": [\n \"elementDidMutate\",\n \"events.beforeinput\",\n \"events.input\",\n \"events.compositionend\",\n ],\n\n \"Trix.ToolbarController\": [\n \"didClickActionButton\",\n \"didClickAttributeButton\",\n \"didClickDialogButton\",\n \"didKeyDownDialogInput\",\n ]\n}\n\nimport { findClosestElementFromNode } from \"trix/core/helpers\"\n\nlet errorListeners = []\n\nTrix.Debugger = {\n addErrorListener(listener) {\n if (!errorListeners.includes(listener)) {\n errorListeners.push(listener)\n }\n },\n\n removeErrorListener(listener) {\n errorListeners = errorListeners.filter((l) => l !== listener)\n },\n}\n\nconst installMethodDebugger = function(className, methodName) {\n const [ objectName, ...constructorNames ] = className.split(\".\")\n\n const parts = methodName.split(\".\")\n const propertyNames = parts.slice(0, parts.length - 1)\n methodName = parts[parts.length - 1]\n\n let object = this[objectName]\n constructorNames.forEach((constructorName) => {\n object = object[constructorName]\n })\n object = object.prototype\n propertyNames.forEach((propertyName) => {\n object = object[propertyName]\n })\n\n if (typeof object?.[methodName] === \"function\") {\n object[methodName] = wrapFunctionWithErrorHandler(object[methodName])\n } else {\n throw new Error(\"Can't install on non-function\")\n }\n}\n\nconst wrapFunctionWithErrorHandler = function(fn) {\n const trixDebugWrapper = function() {\n try {\n return fn.apply(this, arguments)\n } catch (error) {\n reportError(error)\n throw error\n }\n }\n return trixDebugWrapper\n}\n\nconst reportError = function(error) {\n Trix.Debugger.lastError = error\n\n console.error(\"Trix error!\")\n console.log(error.stack)\n\n const { activeElement } = document\n const editorElement = findClosestElementFromNode(activeElement, { matchingSelector: \"trix-editor\" })\n\n if (editorElement) {\n notifyErrorListeners(error, editorElement)\n } else {\n console.warn(\"Can't find element. document.activeElement =\", activeElement)\n }\n}\n\nconst notifyErrorListeners = (error, element) => {\n errorListeners.forEach((listener) => {\n try {\n listener(error, element)\n } catch (error1) {}\n })\n}\n\n(function() {\n console.groupCollapsed(\"Trix debugger\")\n\n for (const className in DEBUG_METHODS) {\n const methodNames = DEBUG_METHODS[className]\n\n methodNames.forEach((methodName) => {\n try {\n installMethodDebugger(className, methodName)\n console.log(`✓ ${className}#${methodName}`)\n } catch (error) {\n console.warn(`✗ ${className}#${methodName}:`, error.message)\n }\n })\n }\n\n console.groupEnd()\n})()\n" }, { "path": "src/inspector/element.js", "content": "/* eslint-disable\n id-length,\n*/\nimport { installDefaultCSSForTagName } from \"trix/core/helpers\"\n\ninstallDefaultCSSForTagName(\"trix-inspector\", `\\\n%t {\n display: block;\n}\n\n%t {\n position: fixed;\n background: #fff;\n border: 1px solid #444;\n border-radius: 5px;\n padding: 10px;\n font-family: sans-serif;\n font-size: 12px;\n overflow: auto;\n word-wrap: break-word;\n}\n\n%t details {\n margin-bottom: 10px;\n}\n\n%t summary:focus {\n outline: none;\n}\n\n%t details .panel {\n padding: 10px;\n}\n\n%t .performance .metrics {\n margin: 0 0 5px 5px;\n}\n\n%t .selection .characters {\n margin-top: 10px;\n}\n\n%t .selection .character {\n display: inline-block;\n font-size: 8px;\n font-family: courier, monospace;\n line-height: 10px;\n vertical-align: middle;\n text-align: center;\n width: 10px;\n height: 10px;\n margin: 0 1px 1px 0;\n border: 1px solid #333;\n border-radius: 1px;\n background: #676666;\n color: #fff;\n}\n\n%t .selection .character.selected {\n background: yellow;\n color: #000;\n}\\\n`)\n\nexport default class TrixInspector extends HTMLElement {\n connectedCallback() {\n this.editorElement = document.querySelector(`trix-editor[trix-id='${this.dataset.trixId}']`)\n this.views = this.createViews()\n\n this.views.forEach((view) => {\n view.render()\n this.appendChild(view.element)\n })\n\n this.reposition()\n\n this.resizeHandler = this.reposition.bind(this)\n addEventListener(\"resize\", this.resizeHandler)\n }\n\n disconnectedCallback() {\n removeEventListener(\"resize\", this.resizeHandler)\n }\n\n createViews() {\n const views = Trix.Inspector.views.map((View) => new View(this.editorElement))\n\n return views.sort((a, b) => a.title.toLowerCase() > b.title.toLowerCase())\n }\n\n reposition() {\n const { top, right } = this.editorElement.getBoundingClientRect()\n\n this.style.top = `${top}px`\n this.style.left = `${right + 10}px`\n this.style.maxWidth = `${window.innerWidth - right - 40}px`\n this.style.maxHeight = `${window.innerHeight - top - 30}px`\n }\n}\n\nwindow.customElements.define(\"trix-inspector\", TrixInspector)\n" }, { "path": "src/inspector/global.js", "content": "window.Trix.Inspector = {\n views: [],\n\n registerView(constructor) {\n return this.views.push(constructor)\n },\n\n install(editorElement) {\n this.editorElement = editorElement\n const element = document.createElement(\"trix-inspector\")\n element.dataset.trixId = this.editorElement.trixId\n return document.body.appendChild(element)\n },\n}\n" }, { "path": "src/inspector/inspector.js", "content": "import \"inspector/element\"\nimport \"inspector/global\"\nimport \"inspector/templates\"\nimport \"inspector/control_element\"\nimport \"inspector/views/debug_view\"\nimport \"inspector/views/document_view\"\nimport \"inspector/views/performance_view\"\nimport \"inspector/views/render_view\"\nimport \"inspector/views/selection_view\"\nimport \"inspector/views/undo_view\"\n" }, { "path": "src/inspector/templates/debug.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/debug\"] = function() {\n return `

\n \n

\n\n

\n \n

\n\n

\n \n

` }\n" }, { "path": "src/inspector/templates/document.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/document\"] = function() {\n const details = this.document.getBlocks().map((block, index) => {\n const { text } = block\n const pieces = text.pieceList.toArray()\n\n return `
\n \n Block ${block.id}, Index: ${index}\n \n
\n Attributes: ${JSON.stringify(block.attributes)}\n
\n\n
\n HTML Attributes: ${JSON.stringify(block.htmlAttributes)}\n
\n\n
\n
\n Text: ${text.id}, Pieces: ${pieces.length}, Length: ${text.getLength()}\n
\n
\n ${piecePartials(pieces).join(\"\\n\")}\n
\n
\n
`\n })\n\n return details.join(\"\\n\")\n}\n\nconst piecePartials = (pieces) =>\n pieces.map((piece, index) =>`
\n
\n Piece ${piece.id}, Index: ${index}\n
\n
\n Attributes: ${JSON.stringify(piece.attributes)}\n
\n
\n ${JSON.stringify(piece.toString())}\n
\n
`)\n" }, { "path": "src/inspector/templates/performance.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/performance\"] = function() {\n return Object.keys(this.data).map((name) => {\n const data = this.data[name]\n return dataMetrics(name, data, this.round)\n }).join(\"\\n\")\n}\n\nconst dataMetrics = function(name, data, round) {\n let item = `${name} (${data.calls})
`\n\n if (data.calls > 0) {\n item += `
\n Mean: ${round(data.mean)}ms
\n Max: ${round(data.max)}ms
\n Last: ${round(data.last)}ms\n
`\n\n return item\n }\n}\n" }, { "path": "src/inspector/templates/render.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/render\"] = () => `Syncs: ${this.syncCount}`\n" }, { "path": "src/inspector/templates/selection.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/selection\"] = function() {\n return `Location range: [${this.locationRange[0].index}:${this.locationRange[0].offset}, ${this.locationRange[1].index}:${this.locationRange[1].offset}]\n ${charSpans(this.characters).join(\"\\n\")}`\n}\n\nconst charSpans = (characters) =>\n Array.from(characters).map(\n (char) => `${char.string}`\n )\n" }, { "path": "src/inspector/templates/undo.js", "content": "if (!window.JST) window.JST = {}\n\nwindow.JST[\"trix/inspector/templates/undo\"] = () =>\n `

Undo stack

\n
    \n ${entryList(this.undoEntries)}\n
\n

Redo stack

\n
    \n ${entryList(this.redoEntries)}\n
`\n\nconst entryList = (entries) =>\n entries.map((entry) =>\n `
  • ${entry.description} ${JSON.stringify({\n selectedRange: entry.snapshot.selectedRange,\n context: entry.context,\n })}
    • `)\n" }, { "path": "src/inspector/templates.js", "content": "import \"inspector/templates/debug\"\nimport \"inspector/templates/document\"\nimport \"inspector/templates/performance\"\nimport \"inspector/templates/render\"\nimport \"inspector/templates/selection\"\nimport \"inspector/templates/undo\"\n" }, { "path": "src/inspector/view.js", "content": "import { handleEvent } from \"trix/core/helpers\"\n\nexport default class View {\n constructor(editorElement) {\n this.editorElement = editorElement\n this.editorController = this.editorElement.editorController\n this.editor = this.editorElement.editor\n this.compositionController = this.editorController.compositionController\n this.composition = this.editorController.composition\n\n this.element = document.createElement(\"details\")\n if (this.getSetting(\"open\") === \"true\") {\n this.element.open = true\n }\n this.element.classList.add(this.constructor.template)\n\n this.titleElement = document.createElement(\"summary\")\n this.element.appendChild(this.titleElement)\n\n this.panelElement = document.createElement(\"div\")\n this.panelElement.classList.add(\"panel\")\n this.element.appendChild(this.panelElement)\n\n this.element.addEventListener(\"toggle\", (event) => {\n if (event.target === this.element) {\n return this.didToggle()\n }\n })\n\n if (this.events) {\n this.installEventHandlers()\n }\n }\n\n installEventHandlers() {\n for (const eventName in this.events) {\n const handler = this.events[eventName]\n const callback = (event) => {\n requestAnimationFrame(() => {\n handler.call(this, event)\n })\n }\n\n handleEvent(eventName, { onElement: this.editorElement, withCallback: callback })\n }\n }\n\n didToggle(event) {\n this.saveSetting(\"open\", this.isOpen())\n return this.render()\n }\n\n isOpen() {\n return this.element.hasAttribute(\"open\")\n }\n\n getTitle() {\n return this.title || \"\"\n }\n\n render() {\n this.renderTitle()\n if (this.isOpen()) {\n this.panelElement.innerHTML = window.JST[`trix/inspector/templates/${this.constructor.template}`].apply(this)\n }\n }\n\n renderTitle() {\n this.titleElement.innerHTML = this.getTitle()\n }\n\n getSetting(key) {\n key = this.getSettingsKey(key)\n return window.sessionStorage?.[key]\n }\n\n saveSetting(key, value) {\n key = this.getSettingsKey(key)\n if (window.sessionStorage) {\n window.sessionStorage[key] = value\n }\n }\n\n getSettingsKey(key) {\n return `trix/inspector/${this.template}/${key}`\n }\n\n get title() {\n return this.constructor.title\n }\n\n get template() {\n return this.constructor.template\n }\n\n get events() {\n return this.constructor.events\n }\n}\n" }, { "path": "src/inspector/views/debug_view.js", "content": "import View from \"inspector/view\"\n\nimport { handleEvent } from \"trix/core/helpers\"\n\nclass DebugView extends View {\n static title = \"Debug\"\n static template = \"debug\"\n\n constructor() {\n super(...arguments)\n this.didToggleViewCaching = this.didToggleViewCaching.bind(this)\n this.didClickRenderButton = this.didClickRenderButton.bind(this)\n this.didClickParseButton = this.didClickParseButton.bind(this)\n this.didToggleControlElement = this.didToggleControlElement.bind(this)\n\n handleEvent(\"change\", {\n onElement: this.element,\n matchingSelector: \"input[name=viewCaching]\",\n withCallback: this.didToggleViewCaching,\n })\n handleEvent(\"click\", {\n onElement: this.element,\n matchingSelector: \"button[data-action=render]\",\n withCallback: this.didClickRenderButton,\n })\n handleEvent(\"click\", {\n onElement: this.element,\n matchingSelector: \"button[data-action=parse]\",\n withCallback: this.didClickParseButton,\n })\n handleEvent(\"change\", {\n onElement: this.element,\n matchingSelector: \"input[name=controlElement]\",\n withCallback: this.didToggleControlElement,\n })\n }\n\n didToggleViewCaching({ target }) {\n if (target.checked) {\n return this.compositionController.enableViewCaching()\n } else {\n return this.compositionController.disableViewCaching()\n }\n }\n\n didClickRenderButton() {\n return this.editorController.render()\n }\n\n didClickParseButton() {\n return this.editorController.reparse()\n }\n\n didToggleControlElement({ target }) {\n if (target.checked) {\n this.control = new Trix.Inspector.ControlElement(this.editorElement)\n } else {\n this.control?.uninstall()\n this.control = null\n }\n }\n}\n\nTrix.Inspector.registerView(DebugView)\n" }, { "path": "src/inspector/views/document_view.js", "content": "import View from \"inspector/view\"\n\nclass DocumentView extends View {\n static title = \"Document\"\n static template = \"document\"\n static events = {\n \"trix-change\": function() {\n return this.render()\n },\n }\n\n render() {\n this.document = this.editor.getDocument()\n return super.render(...arguments)\n }\n}\n\nTrix.Inspector.registerView(DocumentView)\n" }, { "path": "src/inspector/views/performance_view.js", "content": "import View from \"inspector/view\"\nconst now = window.performance?.now ? () => performance.now() : () => new Date().getTime()\n\nclass PerformanceView extends View {\n static title = \"Performance\"\n static template = \"performance\"\n\n constructor() {\n super(...arguments)\n this.documentView = this.compositionController.documentView\n\n this.data = {}\n this.track(\"documentView.render\")\n this.track(\"documentView.sync\")\n this.track(\"documentView.garbageCollectCachedViews\")\n this.track(\"composition.replaceHTML\")\n\n this.render()\n }\n\n track(methodPath) {\n this.data[methodPath] = { calls: 0, total: 0, mean: 0, max: 0, last: 0 }\n const parts = methodPath.split(\".\")\n const propertyNames = parts.slice(0, parts.length - 1)\n const methodName = parts[parts.length - 1]\n\n let object = this\n\n propertyNames.forEach((propertyName) => {\n object = object[propertyName]\n })\n\n const original = object[methodName]\n\n object[methodName] = function() {\n const started = now()\n const result = original.apply(object, arguments)\n const timing = now() - started\n this.record(methodPath, timing)\n return result\n }.bind(this)\n }\n\n record(methodPath, timing) {\n const data = this.data[methodPath]\n data.calls += 1\n data.total += timing\n data.mean = data.total / data.calls\n if (timing > data.max) {\n data.max = timing\n }\n data.last = timing\n return this.render()\n }\n\n round(ms) {\n return Math.round(ms * 1000) / 1000\n }\n}\n\nTrix.Inspector.registerView(PerformanceView)\n" }, { "path": "src/inspector/views/render_view.js", "content": "import View from \"inspector/view\"\n\nexport default class RenderView extends View {\n static title = \"Renders\"\n static template = \"render\"\n static events = {\n \"trix-render\": function() {\n this.renderCount++\n return this.render()\n },\n\n \"trix-sync\": function() {\n this.syncCount++\n return this.render()\n },\n }\n\n constructor() {\n super(...arguments)\n this.renderCount = 0\n this.syncCount = 0\n }\n\n getTitle() {\n return `${this.title} (${this.renderCount})`\n }\n}\n\nTrix.Inspector.registerView(RenderView)\n" }, { "path": "src/inspector/views/selection_view.js", "content": "import View from \"inspector/view\"\nimport UTF16String from \"trix/core/utilities/utf16_string\"\n\nclass SelectionView extends View {\n static title = \"Selection\"\n static template = \"selection\"\n static events = {\n \"trix-selection-change\": function() {\n return this.render()\n },\n \"trix-render\": function() {\n return this.render()\n },\n }\n\n render() {\n this.document = this.editor.getDocument()\n this.range = this.editor.getSelectedRange()\n this.locationRange = this.composition.getLocationRange()\n this.characters = this.getCharacters()\n return super.render(...arguments)\n }\n\n getCharacters() {\n const chars = []\n const utf16string = UTF16String.box(this.document.toString())\n const rangeIsExpanded = this.range[0] !== this.range[1]\n let position = 0\n while (position < utf16string.length) {\n let string = utf16string.charAt(position).toString()\n if (string === \"\\n\") {\n string = \"⏎\"\n }\n const selected = rangeIsExpanded && position >= this.range[0] && position < this.range[1]\n chars.push({ string, selected })\n position++\n }\n return chars\n }\n\n getTitle() {\n return `${this.title} (${this.range.join()})`\n }\n}\n\nTrix.Inspector.registerView(SelectionView)\n" }, { "path": "src/inspector/views/undo_view.js", "content": "import View from \"inspector/view\"\n\nclass UndoView extends View {\n static title = \"Undo\"\n static template = \"undo\"\n static events = {\n \"trix-change\": function() {\n return this.render()\n },\n }\n\n render() {\n this.undoEntries = this.editor.undoManager.undoEntries\n this.redoEntries = this.editor.undoManager.redoEntries\n return super.render(...arguments)\n }\n}\n\nTrix.Inspector.registerView(UndoView)\n" }, { "path": "src/inspector/watchdog/deserializer.js", "content": "export default class Deserializer {\n constructor(document, snapshot) {\n this.document = document\n this.snapshot = snapshot\n this.tree = this.snapshot.tree\n this.selection = this.snapshot.selection\n this.deserializeTree()\n this.deserializeSelection()\n }\n\n deserializeTree() {\n this.nodes = {}\n this.element = this.deserializeNode(this.tree)\n }\n\n deserializeNode(serializedNode) {\n let node\n switch (serializedNode.name) {\n case \"#text\":\n node = this.deserializeTextNode(serializedNode)\n break\n case \"#comment\":\n node = this.deserializeComment(serializedNode)\n break\n default:\n node = this.deserializeElement(serializedNode)\n break\n }\n\n this.nodes[serializedNode.id] = node\n return node\n }\n\n deserializeTextNode({ value }) {\n return this.document.createTextNode(value)\n }\n\n deserializeComment({ value }) {\n return this.document.createComment(value)\n }\n\n deserializeChildren(serializedNode) {\n const children = serializedNode.children ? Array.from(serializedNode.children) : []\n return children.map((child) => this.deserializeNode(child))\n }\n\n deserializeElement(serializedNode) {\n const node = this.document.createElement(serializedNode.name)\n const object = serializedNode.attributes ? serializedNode.attributes : {}\n for (const name in object) {\n const value = object[name]\n node.setAttribute(name, value)\n }\n while (node.lastChild) {\n node.removeChild(node.lastChild)\n }\n this.deserializeChildren(serializedNode).forEach((childNode) => {\n node.appendChild(childNode)\n })\n return node\n }\n\n deserializeSelection() {\n if (!this.selection) return\n\n const { start, end } = this.selection\n const startContainer = this.nodes[start.id]\n const endContainer = this.nodes[end.id]\n\n this.range = this.document.createRange()\n this.range.setStart(startContainer, start.offset)\n this.range.setEnd(endContainer, end.offset)\n return this.range\n }\n\n getElement() {\n return this.element\n }\n\n getRange() {\n return this.range\n }\n}\n" }, { "path": "src/inspector/watchdog/player.js", "content": "import \"inspector/watchdog/recording\"\n\nexport default class Player {\n constructor(recording) {\n this.tick = this.tick.bind(this)\n this.recording = recording\n this.playing = false\n this.index = -1\n this.length = this.recording.getFrameCount()\n }\n\n play() {\n if (this.playing) return\n if (this.hasEnded()) {\n this.index = -1\n }\n this.playing = true\n this.delegate?.playerDidStartPlaying?.()\n return this.tick()\n }\n\n tick() {\n if (this.hasEnded()) {\n return this.stop()\n } else {\n this.seek(this.index + 1)\n const duration = this.getTimeToNextFrame()\n this.timeout = setTimeout(this.tick, duration)\n }\n }\n\n seek(index) {\n const previousIndex = this.index\n\n if (index < 0) {\n this.index = 0\n } else if (index >= this.length) {\n this.index = this.length - 1\n } else {\n this.index = index\n }\n\n if (this.index !== previousIndex) {\n return this.delegate?.playerDidSeekToIndex?.(index)\n }\n }\n\n stop() {\n if (!this.playing) return\n clearTimeout(this.timeout)\n this.timeout = null\n this.playing = false\n return this.delegate?.playerDidStopPlaying?.()\n }\n\n isPlaying() {\n return this.playing\n }\n\n hasEnded() {\n return this.index >= this.length - 1\n }\n\n getSnapshot() {\n return this.recording.getSnapshotAtFrameIndex(this.index)\n }\n\n getEvents() {\n return this.recording.getEventsUpToFrameIndex(this.index)\n }\n\n getTimeToNextFrame() {\n const current = this.recording.getTimestampAtFrameIndex(this.index)\n const next = this.recording.getTimestampAtFrameIndex(this.index + 1)\n const duration = current && next ? next - current : 0\n return Math.min(duration, 500)\n }\n}\n" }, { "path": "src/inspector/watchdog/player_controller.js", "content": "import Player from \"inspector/watchdog/player\"\nimport PlayerView from \"inspector/watchdog/player_view\"\n\nexport default class PlayerController {\n constructor(element, recording) {\n this.element = element\n this.recording = recording\n this.player = new Player(this.recording)\n this.player.delegate = this\n\n this.view = new PlayerView(this.element)\n this.view.delegate = this\n\n this.view.setLength(this.player.length)\n this.player.seek(0)\n }\n\n play() {\n return this.player.play()\n }\n\n stop() {\n return this.player.stop()\n }\n\n playerViewDidClickPlayButton() {\n if (this.player.isPlaying()) {\n return this.player.stop()\n } else {\n return this.player.play()\n }\n }\n\n playerViewDidChangeSliderValue(value) {\n return this.player.seek(value)\n }\n\n playerDidSeekToIndex(index) {\n this.view.setIndex(index)\n\n const snapshot = this.player.getSnapshot(index)\n if (snapshot) {\n this.view.renderSnapshot(snapshot)\n }\n\n const events = this.player.getEvents(index)\n if (events) {\n return this.view.renderEvents(events)\n }\n }\n\n playerDidStartPlaying() {\n return this.view.playerDidStartPlaying()\n }\n\n playerDidStopPlaying() {\n return this.view.playerDidStopPlaying()\n }\n}\n" }, { "path": "src/inspector/watchdog/player_element.js", "content": "import { installDefaultCSSForTagName } from \"trix/core/helpers\"\n\nimport Recording from \"inspector/watchdog/recording\"\nimport PlayerController from \"inspector/watchdog/player_controller\"\n\ninstallDefaultCSSForTagName(\"trix-watchdog-player\", `\\\n%t > div { display: -webkit-flex; display: flex; font-size: 14px; margin: 10px 0 }\n%t > div > button { width: 65px }\n%t > div > input { width: 100%; -webkit-align-self: stretch; align-self: stretch; margin: 0 20px }\n%t > div > span { display: inline-block; text-align: center; width: 110px }\\\n`)\n\nclass PlayerElement extends HTMLElement {\n static get observedAttributes() { return [ \"src\" ] }\n\n connectedCallback() {\n const url = this.getAttribute(\"src\")\n if (url) {\n return this.fetchRecordingAtURL(url)\n }\n }\n\n attributeChangedCallback(attributeName, oldValue, newValue) {\n if (attributeName === \"src\") {\n return this.fetchRecordingAtURL(newValue)\n }\n }\n\n fetchRecordingAtURL(url) {\n this.activeRequest?.abort()\n this.activeRequest = new XMLHttpRequest()\n this.activeRequest.open(\"GET\", url)\n this.activeRequest.send()\n\n this.activeRequest.onload = () => {\n const json = this.activeRequest.responseText\n this.activeRequest = null\n const recording = Recording.fromJSON(JSON.parse(json))\n return this.loadRecording(recording)\n }\n }\n\n loadRecording(recording) {\n this.controller = new PlayerController(this, recording)\n }\n}\n\nwindow.customElements.define(\"trix-watchdog-player\", PlayerElement)\n" }, { "path": "src/inspector/watchdog/player_view.js", "content": "import Deserializer from \"inspector/watchdog/deserializer\"\nimport View from \"../view\"\n\nconst clear = (element) => {\n while (element.lastChild) {\n element.removeChild(element.lastChild)\n }\n}\n\nconst render = (element, ...contents) => {\n clear(element)\n contents.forEach((content) => element.appendChild(content))\n}\n\nconst select = (document, range) => {\n if (!range) return\n const selection = window.getSelection()\n selection.removeAllRanges()\n selection.addRange(range)\n}\n\nexport default class PlayerView extends View {\n static documentClassName = \"trix-watchdog-player\"\n static playingClassName = \"trix-watchdog-player-playing\"\n\n constructor(element) {\n super(...arguments)\n this.frameDidLoadDefaultDocument = this.frameDidLoadDefaultDocument.bind(this)\n this.frameDidLoadStylesheet = this.frameDidLoadStylesheet.bind(this)\n this.frameDidLoseFocus = this.frameDidLoseFocus.bind(this)\n this.didClickPlayButton = this.didClickPlayButton.bind(this)\n this.didChangeSliderValue = this.didChangeSliderValue.bind(this)\n this.updateFrame = this.updateFrame.bind(this)\n\n this.element = element\n this.frame = document.createElement(\"iframe\")\n this.frame.style.border = \"none\"\n this.frame.style.width = \"100%\"\n this.frame.onload = this.frameDidLoadDefaultDocument\n this.frame.onblur = this.frameDidLoseFocus\n\n const controlsContainer = document.createElement(\"div\")\n\n this.playButton = document.createElement(\"button\")\n this.playButton.textContent = \"Play\"\n this.playButton.onclick = this.didClickPlayButton\n\n this.slider = document.createElement(\"input\")\n this.slider.type = \"range\"\n this.slider.oninput = this.didChangeSliderValue\n\n this.indexLabel = document.createElement(\"span\")\n\n const logContainer = document.createElement(\"div\")\n\n this.log = document.createElement(\"textarea\")\n this.log.setAttribute(\"readonly\", \"\")\n this.log.rows = 4\n\n render(controlsContainer, this.playButton, this.slider, this.indexLabel)\n render(logContainer, this.log)\n render(this.element, this.frame, controlsContainer, logContainer)\n this.setIndex(0)\n }\n\n renderSnapshot(snapshot) {\n if (this.body) {\n const { element, range } = this.deserializeSnapshot(snapshot)\n render(this.body, element)\n select(this.document, range)\n return this.updateFrame()\n } else {\n this.snapshot = snapshot\n }\n }\n\n renderEvents(events) {\n const renderedEvents = events.slice().reverse().map((event, index) => {\n return this.renderEvent(event, index)\n })\n this.log.innerText = renderedEvents.join(\"\\n\")\n }\n\n setIndex(index) {\n this.slider.value = index\n this.indexLabel.textContent = `Frame ${index}`\n }\n\n setLength(length) {\n this.slider.max = length - 1\n }\n\n playerDidStartPlaying() {\n this.element.classList.add(this.constructor.playingClassName)\n this.playButton.textContent = \"Pause\"\n }\n\n playerDidStopPlaying() {\n this.element.classList.remove(this.constructor.playingClassName)\n this.playButton.textContent = \"Play\"\n }\n\n frameDidLoadDefaultDocument() {\n this.document = this.frame.contentDocument\n this.document.documentElement.classList.add(this.constructor.documentClassName)\n\n this.document.head.innerHTML = document.head.innerHTML\n\n Array.from(this.document.head.querySelectorAll(\"link[rel=stylesheet]\")).forEach((stylesheet) => {\n stylesheet.onload = this.frameDidLoadStylesheet\n })\n\n this.body = this.document.body\n this.body.style.cssText = \"margin: 0; padding: 0\"\n this.body.onkeydown = (event) => event.preventDefault()\n\n if (this.snapshot) {\n this.renderSnapshot(this.snapshot)\n this.snapshot = null\n }\n }\n\n frameDidLoadStylesheet() {\n return this.updateFrame()\n }\n\n frameDidLoseFocus() {\n if (this.element.classList.contains(this.constructor.playingClassName)) {\n return requestAnimationFrame(this.updateFrame)\n }\n }\n\n didClickPlayButton() {\n return this.delegate?.playerViewDidClickPlayButton?.()\n }\n\n didChangeSliderValue() {\n const value = parseInt(this.slider.value, 10)\n return this.delegate?.playerViewDidChangeSliderValue?.(value)\n }\n\n renderEvent(event, index) {\n let description, key\n\n switch (event.type) {\n case \"input\":\n description = \"Browser input event received\"\n break\n case \"keypress\":\n key = event.character || event.charCode || event.keyCode\n description = `Key pressed: ${JSON.stringify(key)}`\n break\n case \"log\":\n description = event.message\n break\n case \"snapshot\":\n description = \"DOM update\"\n }\n\n return `[${index}] ${description}`\n }\n\n deserializeSnapshot(snapshot) {\n const deserializer = new Deserializer(this.document, snapshot)\n return {\n element: deserializer.getElement(),\n range: deserializer.getRange(),\n }\n }\n\n updateFrame() {\n this.frame.style.height = 0\n this.frame.style.height = this.body.scrollHeight + \"px\"\n this.frame.focus()\n return this.frame.contentWindow.focus()\n }\n}\n" }, { "path": "src/inspector/watchdog/recorder.js", "content": "import Recording from \"inspector/watchdog/recording\"\nimport Serializer from \"inspector/watchdog/serializer\"\n\nexport default class Recorder {\n constructor(element, { snapshotLimit } = {}) {\n this.recordSnapshotDuringNextAnimationFrame = this.recordSnapshotDuringNextAnimationFrame.bind(this)\n this.handleEvent = this.handleEvent.bind(this)\n this.element = element\n this.snapshotLimit = snapshotLimit\n this.recording = new Recording()\n }\n\n start() {\n if (this.started) return\n\n this.installMutationObserver()\n this.installEventListeners()\n this.recordSnapshot()\n this.started = true\n }\n\n stop() {\n if (!this.started) return\n\n this.uninstallMutationObserver()\n this.uninstallEventListeners()\n this.started = false\n }\n\n log(message) {\n return this.recording.recordEvent({ type: \"log\", message })\n }\n\n installMutationObserver() {\n this.mutationObserver = new MutationObserver(this.recordSnapshotDuringNextAnimationFrame)\n return this.mutationObserver.observe(this.element, {\n attributes: true,\n characterData: true,\n childList: true,\n subtree: true,\n })\n }\n\n uninstallMutationObserver() {\n this.mutationObserver.disconnect()\n this.mutationObserver = null\n }\n\n recordSnapshotDuringNextAnimationFrame() {\n if (!this.animationFrameRequest) {\n this.animationFrameRequest = requestAnimationFrame(() => {\n this.animationFrameRequest = null\n return this.recordSnapshot()\n })\n }\n return this.animationFrameRequest\n }\n\n installEventListeners() {\n this.element.addEventListener(\"input\", this.handleEvent, true)\n this.element.addEventListener(\"keypress\", this.handleEvent, true)\n return document.addEventListener(\"selectionchange\", this.handleEvent, true)\n }\n\n uninstallEventListeners() {\n this.element.removeEventListener(\"input\", this.handleEvent, true)\n this.element.removeEventListener(\"keypress\", this.handleEvent, true)\n return document.removeEventListener(\"selectionchange\", this.handleEvent, true)\n }\n\n handleEvent(event) {\n switch (event.type) {\n case \"input\":\n return this.recordInputEvent(event)\n case \"keypress\":\n return this.recordKeypressEvent(event)\n case \"selectionchange\":\n return this.recordSnapshotDuringNextAnimationFrame()\n }\n }\n\n recordInputEvent(event) {\n return this.recording.recordEvent({ type: \"input\" })\n }\n\n recordKeypressEvent(event) {\n return this.recording.recordEvent({\n type: \"keypress\",\n altKey: event.altKey,\n ctrlKey: event.ctrlKey,\n metaKey: event.metaKey,\n shiftKey: event.shiftKey,\n keyCode: event.keyCode,\n charCode: event.charCode,\n character: characterFromKeyboardEvent(event),\n })\n }\n\n recordSnapshot() {\n this.recording.recordSnapshot(this.getSnapshot())\n if (this.snapshotLimit != null) {\n return this.recording.truncateToSnapshotCount(this.snapshotLimit)\n }\n }\n\n getSnapshot() {\n const serializer = new Serializer(this.element)\n return serializer.getSnapshot()\n }\n}\n\nconst characterFromKeyboardEvent = function(event) {\n if (event.which === null) {\n return String.fromCharCode(event.keyCode)\n } else if (event.which !== 0 && event.charCode !== 0) {\n return String.fromCharCode(event.charCode)\n }\n}\n" }, { "path": "src/inspector/watchdog/recording.js", "content": "export default class Recording {\n static fromJSON({ snapshots, frames }) {\n return new this(snapshots, frames)\n }\n\n constructor(snapshots = [], frames = []) {\n this.snapshots = snapshots\n this.frames = frames\n }\n\n recordSnapshot(snapshot) {\n const snapshotJSON = JSON.stringify(snapshot)\n if (snapshotJSON !== this.lastSnapshotJSON) {\n this.lastSnapshotJSON = snapshotJSON\n this.snapshots.push(snapshot)\n return this.recordEvent({ type: \"snapshot\" })\n }\n }\n\n recordEvent(event) {\n const frame = [ this.getTimestamp(), this.snapshots.length - 1, event ]\n return this.frames.push(frame)\n }\n\n getSnapshotAtIndex(index) {\n if (index >= 0) {\n return this.snapshots[index]\n }\n }\n\n getSnapshotAtFrameIndex(frameIndex) {\n const snapshotIndex = this.getSnapshotIndexAtFrameIndex(frameIndex)\n return this.getSnapshotAtIndex(snapshotIndex)\n }\n\n getTimestampAtFrameIndex(index) {\n return this.frames[index]?.[0]\n }\n\n getSnapshotIndexAtFrameIndex(index) {\n return this.frames[index]?.[1]\n }\n\n getEventAtFrameIndex(index) {\n return this.frames[index]?.[2]\n }\n\n getEventsUpToFrameIndex(index) {\n return this.frames.slice(0, index + 1).map((frame) => frame[2])\n }\n\n getFrameCount() {\n return this.frames.length\n }\n\n getTimestamp() {\n return new Date().getTime()\n }\n\n truncateToSnapshotCount(snapshotCount) {\n const offset = this.snapshots.length - snapshotCount\n if (offset < 0) return\n\n const { frames } = this\n this.frames = frames.map(([ timestamp, index, event ]) => {\n if (index >= offset) {\n return [ timestamp, index - offset, event ]\n }\n }).filter(frame => frame)\n\n this.snapshots = this.snapshots.slice(offset)\n }\n\n toJSON() {\n return { snapshots: this.snapshots, frames: this.frames }\n }\n}\n" }, { "path": "src/inspector/watchdog/serializer.js", "content": "export default class Serializer {\n constructor(element) {\n this.element = element\n this.id = 0\n this.serializeTree()\n this.serializeSelection()\n }\n\n serializeTree() {\n this.ids = new Map()\n this.tree = this.serializeNode(this.element)\n }\n\n serializeNode(node) {\n const object = { id: ++this.id, name: node.nodeName }\n this.ids.set(node, object.id)\n\n switch (node.nodeType) {\n case Node.ELEMENT_NODE:\n this.serializeElementToObject(node, object)\n this.serializeElementChildrenToObject(node, object)\n break\n\n case Node.TEXT_NODE:\n case Node.COMMENT_NODE:\n this.serializeNodeValueToObject(node, object)\n break\n }\n\n return object\n }\n\n serializeElementToObject(node, object) {\n const attributes = {}\n let hasAttributes = false\n\n Array.from(node.attributes).forEach(({ name }) => {\n if (node.hasAttribute(name)) {\n let value = node.getAttribute(name)\n if (name === \"src\" && value.slice(0, 5) === \"data:\") {\n value = \"data:\"\n }\n attributes[name] = value\n hasAttributes = true\n }\n })\n\n if (hasAttributes) {\n object.attributes = attributes\n }\n }\n\n serializeElementChildrenToObject(node, object) {\n if (node.childNodes.length) {\n object.children = Array.from(node.childNodes).map((childNode) => this.serializeNode(childNode))\n }\n }\n\n serializeNodeValueToObject(node, object) {\n object.value = node.nodeValue\n }\n\n serializeSelection() {\n const selection = window.getSelection()\n if (selection.rangeCount <= 0) return\n\n const range = selection.getRangeAt(0)\n const startId = this.ids.get(range?.startContainer)\n const endId = this.ids.get(range?.endContainer)\n\n if (startId && endId) {\n this.selection = {\n start: { id: startId, offset: range.startOffset },\n end: { id: endId, offset: range.endOffset },\n }\n }\n }\n\n getSnapshot() {\n return { tree: this.tree, selection: this.selection }\n }\n}\n" }, { "path": "src/inspector/watchdog.js", "content": "import \"inspector/watchdog/recorder\"\nimport \"inspector/watchdog/player_element\"\n\nTrix.Watchdog = {}\n" }, { "path": "src/test/system/accessibility_test.js", "content": "import { assert, insertImageAttachment, skipIf, test, testGroup, triggerEvent } from \"test/test_helper\"\nimport { delay } from \"test/test_helpers/timing_helpers\"\nimport TrixEditorElement from \"trix/elements/trix_editor_element\"\n\ntestGroup(\"Accessibility attributes\", { template: \"editor_default_aria_label\" }, () => {\n test(\"sets the role to textbox\", () => {\n const editor = document.getElementById(\"editor-without-labels\")\n assert.equal(editor.getAttribute(\"role\"), \"textbox\")\n })\n\n test(\"reads img[alt] from Attachment attributes\", async () => {\n const element = getEditorElement()\n element.addEventListener(\"trix-attachment-add\", (event) => event.attachment.setAttributes({ alt: \"some alt text\" }))\n\n insertImageAttachment()\n await delay(20)\n\n const image = element.querySelector(\"img\")\n assert.equal(\"some alt text\", image.getAttribute(\"alt\"), \"sets [alt] from Attachment attribute\")\n })\n\n skipIf(TrixEditorElement.formAssociated, \"does not set aria-label when the element has no