@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "jest/globals": true,
+    "cypress/globals": true
+  },
+  "plugins": ["cypress"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:cypress/recommended",
+    "plugin:jest/style",
+    "plugin:jest/recommended"
+  ],
+  "overrides": [
+    {
+      // Cypress use different assertion methods. Don't validate that tests have assertions.
+      "files": ["**/*.spec.cy.ts"],
+      "rules": { "jest/expect-expect": "off" }
+    }
+  ],
+  "settings": {
+    "react": {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      "version": "detect"
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    // The rules below are listed in the order they appear on the eslint-plugin-react rules page.
+
+    // React
+    // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
+    "react/button-has-type": "error"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,155 @@
+# Change Log
+
+## 0.0.0-rbv2-20240530041851
+
+### Major Changes
+
+- f7279c6: Migration to resource-browser 2.x.x and use of plugin model. Alterations to data fetching for url resolution for FTE due to changes in RB2.
+
+  Breaking change: change to resource-browser 2.x.x requires a different context wrapper to version 1.x.x which the component editing ui and the formatted text editor relies upon to render the resource picker when selecting a resource; making the internal update to RB2 incompatible with 1.x.x usages of these packages.
+
+  This change was made to expand the support the resource browser had for data sources other than Matrix.
+
+  Consumers need to update usages of ResourceBrowserContext.provider with ResourceBrowserContextProvider and provide plugins e.g. @squiz/matrix-resource-browser-plugin or @squiz/dam-resource-browser-plugin to the context interface. Consumers also need to provide a new url fetcher to the FTE EditorContext.Provider `resolveNodeToUrl` to resolve MatrixAsset nodes to a url form; previously this relied upon exposed parts of the ResourceBrowser which are no longer exposed outside the RB itself.
+
+## 1.71.0
+
+### Minor Changes
+
+- 882fb82: Added table transormation support between Squiz & Remirror models (allowing saving of tables)
+
+## 1.70.0
+
+### Minor Changes
+
+- 0513957: `enableTableTool` prop added to the Editor to control the display of the table insertion tool until we are ready to release it
+
+## 1.69.0
+
+### Minor Changes
+
+- 6b8b464: Added support for SHIFT + ENTER line breaks to FTE
+
+## 1.68.1
+
+### Patch Changes
+
+- e2010f7: Fixed pasting into FTE from Microsoft office
+
+## 1.68.0
+
+### Minor Changes
+
+- 4d3dbba: Updated FTE shortcuts to change tooltips depending on OS
+
+## 1.67.1
+
+### Patch Changes
+
+- 928cc88: Made children optional for formatted text nodes/tags
+- Updated dependencies [928cc88]
+  - @squiz/dx-json-schema-lib@1.65.1
+
+## 1.67.0
+
+### Minor Changes
+
+- 6867717: Changed output of FTE to use semantic HTML where applicable
+
+## 1.66.4
+
+### Patch Changes
+
+- 8421756: Selected image assets in the resource browser will now display the actual image instead of just the image asset icon if they have a URL specified
+- Updated dependencies [8421756]
+  - @squiz/resource-browser@1.66.3
+
+## 1.66.3
+
+### Patch Changes
+
+- 7234d6c: Fixed FTE popover menu from having unusual positioning in certain circumstances
+
+## 1.66.2
+
+### Patch Changes
+
+- 629a64f: Fixed FTE bubble menu from staying visible when unfocusing from editor
+
+## 1.66.1
+
+### Patch Changes
+
+- e01fd51: Fixed FTE floating toolbar overlap
+
+## 1.66.0
+
+### Minor Changes
+
+- a5b0869: Update fte toolbar to max height 100% so that it can be flexible at any width and position placeholder
+
+## 1.65.1
+
+### Patch Changes
+
+- 402e8b1: Fixed issue where some Remirror text alignment options (eg. start and end) were not correctly transformed to Squiz formatted text structure.
+
+## 1.65.0
+
+### Minor Changes
+
+- e11f4e7: Exported function for transforming HTML to formatted text JSON.
+
+## 1.64.0
+
+### Minor Changes
+
+- ac68ec6: Unpinned Squiz dependencies, they should now be following semver.
+
+### Patch Changes
+
+- Updated dependencies [ac68ec6]
+  - @squiz/dx-json-schema-lib@1.65.0
+  - @squiz/resource-browser@1.65.0
+
+## 1.63.2
+
+### Patch Changes
+
+- Updated dependencies [e717e6e]
+  - @squiz/dx-json-schema-lib@1.64.0
+  - @squiz/resource-browser@1.64.1
+
+## 1.63.1
+
+### Patch Changes
+
+- Updated dependencies [e7d4c0f]
+  - @squiz/resource-browser@1.64.0
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.6.1-alpha.5](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.5) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+## [1.6.1-alpha.4](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.4) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+## [1.6.1-alpha.3](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.2...v1.6.1-alpha.3) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+## [1.6.1-alpha.2](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.2) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+## [1.6.1-alpha.1](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.1) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+## [1.6.1-alpha.0](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.0) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor

package/README.md

@@ -0,0 +1,74 @@
+# DXP Formatted text editor component
+
+This repo contains the necessary code to develop and publish an NPM package for creating formatted text editors for use in Squiz products.
+
+The formatted text editor is using the [Remirror](https://remirror.io/) React library.
+
+### Requirements
+
+- [Volta](https://volta.sh/)
+- [Node/NPM](https://nodejs.org/en/)
+
+### Working locally
+
+Provided you have `Volta` installed as soon as you are in the `formatted-text-editor` directory you should be on the correct Node version.
+See the `package.json` for the specific version.
+
+Now run the following commands from the `packages/formatted-text-editor/` directory.
+
+```sh
+npm i
+```
+
+```sh
+npm run dev
+```
+This will expose `http://localhost:5173/` and this can be viewed in the browser.
+
+> TIP: Make sure you have already installed the node modules at the root level of the repo.
+
+## WIP: Contributing
+
+## Testing
+
+Tests must be written when contributing to this package. Tests are automatically run in CI and test failure will result in unmerged code.
+
+### Unit testing
+
+This package using Jest to perform Unit testing. In addition to Jest we are using a few Testing Library utilities:
+
+- [React testing library](https://testing-library.com/docs/react-testing-library/intro/) - Enables React component testing
+- [Jest DOM](https://testing-library.com/docs/ecosystem-jest-dom/) - Enables custom matchers
+
+Tests should be co-located with componentry and should strive for maximum coverage.
+
+To run tests locally you can run:
+```sh
+npm run test
+```
+Or if you'd like to "watch" for changes:
+```sh
+npm run test:watch
+```
+
+When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).
+
+### Test coverage
+
+Test coverage is enforced globally in this package. You can run the test coverage script from the package root:
+
+```sh
+npm run test:coverage
+```
+
+Coverage will also run as part of the normal test script. Please see ./jest.config.ts for the currently configured thresholds.
+
+### End to end testing
+
+This package uses [Cypress](https://docs.cypress.io/) for end to end testing.
+
+To run tests locally you can run:
+```sh
+npm run test:e2e
+```
+Cypress is configured to look at a preview dev environment on `http://localhost:8080`.

package/build.js

@@ -0,0 +1,21 @@
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const postcssConfig = require('./postcss.config').plugins;
+
+esbuild
+  .build({
+    entryPoints: ['src/index.scss'],
+    bundle: true,
+    outdir: 'lib',
+    plugins: [
+      sassPlugin({
+        type: 'css',
+        transform: async (source) => {
+          const { css } = postcss(postcssConfig).process(source);
+          return css;
+        },
+      }),
+    ],
+  })
+  .catch(() => process.exit(1));