@atlaskit/editor-ssr-renderer 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-ssr-renderer
 
+## 1.3.0
+
+### Minor Changes
+
+- [`c7acfc11f076a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7acfc11f076a) -
+  [https://hello.jira.atlassian.cloud/browse/EDITOR-3745](EDITOR-3745) - adopt EditorSSRRenderer to
+  ReactEditorView
+
+## 1.2.0
+
+### Minor Changes
+
+- [`92ad90cd1d2e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92ad90cd1d2e8) -
+  [https://hello.jira.atlassian.cloud/browse/EDITOR-3332] - created EditorSSRRenderer component
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/editor-ssr-renderer/EditorSSRRenderer.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorSSRRenderer = EditorSSRRenderer;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
+var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _excluded = ["preset", "buildDoc", "portalProviderAPI", "intl", "pluginInjectionAPI"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// The copy of type from prosemirror-view.
+// Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
+var SSREditorView = /*#__PURE__*/function (_EditorView) {
+  function SSREditorView() {
+    (0, _classCallCheck2.default)(this, SSREditorView);
+    return _callSuper(this, SSREditorView, arguments);
+  }
+  (0, _inherits2.default)(SSREditorView, _EditorView);
+  return (0, _createClass2.default)(SSREditorView, [{
+    key: "update",
+    value: function update() {
+      // Skip any updates in SSR
+    }
+  }, {
+    key: "setProps",
+    value: function setProps() {
+      // Skip any updates in SSR
+    }
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent() {
+      // Don't notify about events in SSR
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch() {
+      // Don't notify about events in SSR
+    }
+  }]);
+}(_view.EditorView);
+var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
+  function SSREventDispatcher() {
+    (0, _classCallCheck2.default)(this, SSREventDispatcher);
+    return _callSuper(this, SSREventDispatcher, arguments);
+  }
+  (0, _inherits2.default)(SSREventDispatcher, _EventDispatcher);
+  return (0, _createClass2.default)(SSREventDispatcher, [{
+    key: "emit",
+    value: function emit() {
+      // Don't notify about events in SSR
+    }
+  }]);
+}(_eventDispatcher.EventDispatcher);
+function EditorSSRRenderer(_ref) {
+  var preset = _ref.preset,
+    buildDoc = _ref.buildDoc,
+    portalProviderAPI = _ref.portalProviderAPI,
+    intl = _ref.intl,
+    pluginInjectionAPI = _ref.pluginInjectionAPI,
+    divProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // PMPluginFactoryParams use `getIntl` function to get current intl instance,
+  // so we don't need to add `intl` as a dependency to `useMemo`.
+  // We will store intl in ref and access to it dynamically in `getIntl` function call.
+  var intlRef = (0, _react.useRef)(intl);
+  intlRef.current = intl;
+  var plugins = (0, _react.useMemo)(function () {
+    return preset.build({
+      pluginInjectionAPI: pluginInjectionAPI
+    });
+  }, [pluginInjectionAPI, preset]);
+  var pmPlugins = (0, _react.useMemo)(function () {
+    var eventDispatcher = new SSREventDispatcher();
+    var providerFactory = new _providerFactory.ProviderFactory();
+    var pmPluginFactoryParams = {
+      dispatch: (0, _eventDispatcher.createDispatch)(eventDispatcher),
+      dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
+      eventDispatcher: eventDispatcher,
+      featureFlags: {},
+      getIntl: function getIntl() {
+        return intlRef.current;
+      },
+      nodeViewPortalProviderAPI: portalProviderAPI,
+      portalProviderAPI: portalProviderAPI,
+      providerFactory: providerFactory,
+      schema: _schemaDefault.defaultSchema
+    };
+    return plugins.reduce(function (acc, editorPlugin) {
+      var _editorPlugin$pmPlugi;
+      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
+        var plugin = _ref2.plugin;
+        try {
+          var pmPlugin = plugin(pmPluginFactoryParams);
+          if (pmPlugin) {
+            acc.push(pmPlugin);
+          }
+        } catch (_unused) {}
+      });
+      return acc;
+    }, []);
+  }, [plugins, portalProviderAPI]);
+  var nodeViews = (0, _react.useMemo)(function () {
+    return pmPlugins.reduce(function (acc, plugin) {
+      return Object.assign(acc, plugin.props.nodeViews);
+    }, {});
+  }, [pmPlugins]);
+  var markViews = (0, _react.useMemo)(function () {
+    return pmPlugins.reduce(function (acc, plugin) {
+      return Object.assign(acc, plugin.props.markViews);
+    }, {});
+  }, [pmPlugins]);
+  var editorView = (0, _react.useMemo)(function () {
+    return new SSREditorView(null, {
+      state: _state.EditorState.create({
+        schema: _schemaDefault.defaultSchema,
+        plugins: pmPlugins
+      })
+    });
+  }, [pmPlugins]);
+  var serializer = (0, _react.useMemo)(function () {
+    var toDomNodeRenderers = Object.fromEntries(Object.entries(_schemaDefault.defaultSchema.nodes).map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        nodeName = _ref4[0],
+        nodeType = _ref4[1];
+      return [nodeName, nodeType.spec.toDOM];
+    }).filter(function (_ref5) {
+      var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+        toDOM = _ref6[1];
+      return !!toDOM;
+    }));
+    var toDomMarkRenderers = Object.fromEntries(Object.entries(_schemaDefault.defaultSchema.marks).map(function (_ref7) {
+      var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+        markName = _ref8[0],
+        markType = _ref8[1];
+      return [markName, markType.spec.toDOM];
+    }).filter(function (_ref9) {
+      var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
+        toDOM = _ref0[1];
+      return !!toDOM;
+    }));
+    var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+      var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
+        nodeName = _ref10[0],
+        nodeViewFactory = _ref10[1];
+      return [nodeName, function (node) {
+        var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+          return 0;
+        }, [], _view.DecorationSet.create(node, []));
+        return {
+          dom: nodeViewInstance.dom,
+          contentDOM: nodeViewInstance.contentDOM
+        };
+      }];
+    }));
+    var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+      var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+        markName = _ref12[0],
+        markViewFactory = _ref12[1];
+      return [markName, function (mark) {
+        var markViewInstance = markViewFactory(mark, editorView, false);
+        return {
+          dom: markViewInstance.dom,
+          contentDOM: markViewInstance.contentDOM
+        };
+      }];
+    }));
+    return new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+      text: renderText
+    }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+  }, [editorView, markViews, nodeViews]);
+  var editorHTML = (0, _react.useMemo)(function () {
+    try {
+      var pmDoc = buildDoc(editorView.state.schema);
+      if (!pmDoc) {
+        return undefined;
+      }
+      return serializer.serializeFragment(pmDoc.content);
+    } catch (_unused2) {
+      return undefined;
+    }
+  }, [editorView.state.schema, buildDoc, serializer]);
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (containerRef.current && editorHTML) {
+      containerRef.current.innerHTML = '';
+      containerRef.current.appendChild(editorHTML);
+    }
+  }, [editorHTML]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    id: divProps.id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: divProps.className,
+    "aria-label": divProps['aria-label'],
+    "aria-describedby": divProps['aria-describedby'],
+    "data-editor-id": divProps['data-editor-id'],
+    "data-vc-ignore-if-no-layout-shift": true,
+    "aria-multiline": true,
+    role: "textbox"
+    // @ts-expect-error - contenteditable is not exist in div attributes
+    ,
+    contenteditable: "true",
+    "data-gramm": "false",
+    translate: "no"
+  });
+}
+function renderText(node) {
+  return node.text || '';
+}

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorSSRRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _EditorSSRRenderer.EditorSSRRenderer;
+  }
+});
+var _EditorSSRRenderer = require("./editor-ssr-renderer/EditorSSRRenderer");

package/dist/es2019/editor-ssr-renderer/EditorSSRRenderer.js

@@ -0,0 +1,167 @@
+import React, { useMemo, useRef, useLayoutEffect } from 'react';
+import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
+import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+
+// The copy of type from prosemirror-view.
+// Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
+
+class SSREditorView extends EditorView {
+  update() {
+    // Skip any updates in SSR
+  }
+  setProps() {
+    // Skip any updates in SSR
+  }
+  dispatchEvent() {
+    // Don't notify about events in SSR
+  }
+  dispatch() {
+    // Don't notify about events in SSR
+  }
+}
+class SSREventDispatcher extends EventDispatcher {
+  emit() {
+    // Don't notify about events in SSR
+  }
+}
+export function EditorSSRRenderer({
+  preset,
+  buildDoc,
+  portalProviderAPI,
+  intl,
+  pluginInjectionAPI,
+  ...divProps
+}) {
+  // PMPluginFactoryParams use `getIntl` function to get current intl instance,
+  // so we don't need to add `intl` as a dependency to `useMemo`.
+  // We will store intl in ref and access to it dynamically in `getIntl` function call.
+  const intlRef = useRef(intl);
+  intlRef.current = intl;
+  const plugins = useMemo(() => preset.build({
+    pluginInjectionAPI
+  }), [pluginInjectionAPI, preset]);
+  const pmPlugins = useMemo(() => {
+    const eventDispatcher = new SSREventDispatcher();
+    const providerFactory = new ProviderFactory();
+    const pmPluginFactoryParams = {
+      dispatch: createDispatch(eventDispatcher),
+      dispatchAnalyticsEvent: () => {},
+      eventDispatcher,
+      featureFlags: {},
+      getIntl: () => intlRef.current,
+      nodeViewPortalProviderAPI: portalProviderAPI,
+      portalProviderAPI: portalProviderAPI,
+      providerFactory,
+      schema: defaultSchema
+    };
+    return plugins.reduce((acc, editorPlugin) => {
+      var _editorPlugin$pmPlugi;
+      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 ? void 0 : _editorPlugin$pmPlugi.call(editorPlugin).forEach(({
+        plugin
+      }) => {
+        try {
+          const pmPlugin = plugin(pmPluginFactoryParams);
+          if (pmPlugin) {
+            acc.push(pmPlugin);
+          }
+        } catch {}
+      });
+      return acc;
+    }, []);
+  }, [plugins, portalProviderAPI]);
+  const nodeViews = useMemo(() => {
+    return pmPlugins.reduce((acc, plugin) => {
+      return Object.assign(acc, plugin.props.nodeViews);
+    }, {});
+  }, [pmPlugins]);
+  const markViews = useMemo(() => {
+    return pmPlugins.reduce((acc, plugin) => {
+      return Object.assign(acc, plugin.props.markViews);
+    }, {});
+  }, [pmPlugins]);
+  const editorView = useMemo(() => {
+    return new SSREditorView(null, {
+      state: EditorState.create({
+        schema: defaultSchema,
+        plugins: pmPlugins
+      })
+    });
+  }, [pmPlugins]);
+  const serializer = useMemo(() => {
+    const toDomNodeRenderers = Object.fromEntries(Object.entries(defaultSchema.nodes).map(([nodeName, nodeType]) => {
+      return [nodeName, nodeType.spec.toDOM];
+    }).filter(([, toDOM]) => !!toDOM));
+    const toDomMarkRenderers = Object.fromEntries(Object.entries(defaultSchema.marks).map(([markName, markType]) => {
+      return [markName, markType.spec.toDOM];
+    }).filter(([, toDOM]) => !!toDOM));
+    const nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(([nodeName, nodeViewFactory]) => {
+      return [nodeName, node => {
+        const nodeViewInstance = nodeViewFactory(node, editorView, () => 0, [], DecorationSet.create(node, []));
+        return {
+          dom: nodeViewInstance.dom,
+          contentDOM: nodeViewInstance.contentDOM
+        };
+      }];
+    }));
+    const markViewRenderers = Object.fromEntries(Object.entries(markViews).map(([markName, markViewFactory]) => {
+      return [markName, mark => {
+        const markViewInstance = markViewFactory(mark, editorView, false);
+        return {
+          dom: markViewInstance.dom,
+          contentDOM: markViewInstance.contentDOM
+        };
+      }];
+    }));
+    return new DOMSerializer({
+      ...toDomNodeRenderers,
+      ...nodeViewRenderers,
+      text: renderText
+    }, {
+      ...toDomMarkRenderers,
+      ...markViewRenderers
+    });
+  }, [editorView, markViews, nodeViews]);
+  const editorHTML = useMemo(() => {
+    try {
+      const pmDoc = buildDoc(editorView.state.schema);
+      if (!pmDoc) {
+        return undefined;
+      }
+      return serializer.serializeFragment(pmDoc.content);
+    } catch {
+      return undefined;
+    }
+  }, [editorView.state.schema, buildDoc, serializer]);
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    if (containerRef.current && editorHTML) {
+      containerRef.current.innerHTML = '';
+      containerRef.current.appendChild(editorHTML);
+    }
+  }, [editorHTML]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: divProps.id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: divProps.className,
+    "aria-label": divProps['aria-label'],
+    "aria-describedby": divProps['aria-describedby'],
+    "data-editor-id": divProps['data-editor-id'],
+    "data-vc-ignore-if-no-layout-shift": true,
+    "aria-multiline": true,
+    role: "textbox"
+    // @ts-expect-error - contenteditable is not exist in div attributes
+    ,
+    contenteditable: "true",
+    "data-gramm": "false",
+    translate: "no"
+  });
+}
+function renderText(node) {
+  return node.text || '';
+}

package/dist/es2019/index.js

@@ -0,0 +1,4 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { EditorSSRRenderer } from './editor-ssr-renderer/EditorSSRRenderer';

package/dist/esm/editor-ssr-renderer/EditorSSRRenderer.js

@@ -0,0 +1,220 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["preset", "buildDoc", "portalProviderAPI", "intl", "pluginInjectionAPI"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { useMemo, useRef, useLayoutEffect } from 'react';
+import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
+import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+
+// The copy of type from prosemirror-view.
+// Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
+var SSREditorView = /*#__PURE__*/function (_EditorView) {
+  function SSREditorView() {
+    _classCallCheck(this, SSREditorView);
+    return _callSuper(this, SSREditorView, arguments);
+  }
+  _inherits(SSREditorView, _EditorView);
+  return _createClass(SSREditorView, [{
+    key: "update",
+    value: function update() {
+      // Skip any updates in SSR
+    }
+  }, {
+    key: "setProps",
+    value: function setProps() {
+      // Skip any updates in SSR
+    }
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent() {
+      // Don't notify about events in SSR
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch() {
+      // Don't notify about events in SSR
+    }
+  }]);
+}(EditorView);
+var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
+  function SSREventDispatcher() {
+    _classCallCheck(this, SSREventDispatcher);
+    return _callSuper(this, SSREventDispatcher, arguments);
+  }
+  _inherits(SSREventDispatcher, _EventDispatcher);
+  return _createClass(SSREventDispatcher, [{
+    key: "emit",
+    value: function emit() {
+      // Don't notify about events in SSR
+    }
+  }]);
+}(EventDispatcher);
+export function EditorSSRRenderer(_ref) {
+  var preset = _ref.preset,
+    buildDoc = _ref.buildDoc,
+    portalProviderAPI = _ref.portalProviderAPI,
+    intl = _ref.intl,
+    pluginInjectionAPI = _ref.pluginInjectionAPI,
+    divProps = _objectWithoutProperties(_ref, _excluded);
+  // PMPluginFactoryParams use `getIntl` function to get current intl instance,
+  // so we don't need to add `intl` as a dependency to `useMemo`.
+  // We will store intl in ref and access to it dynamically in `getIntl` function call.
+  var intlRef = useRef(intl);
+  intlRef.current = intl;
+  var plugins = useMemo(function () {
+    return preset.build({
+      pluginInjectionAPI: pluginInjectionAPI
+    });
+  }, [pluginInjectionAPI, preset]);
+  var pmPlugins = useMemo(function () {
+    var eventDispatcher = new SSREventDispatcher();
+    var providerFactory = new ProviderFactory();
+    var pmPluginFactoryParams = {
+      dispatch: createDispatch(eventDispatcher),
+      dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
+      eventDispatcher: eventDispatcher,
+      featureFlags: {},
+      getIntl: function getIntl() {
+        return intlRef.current;
+      },
+      nodeViewPortalProviderAPI: portalProviderAPI,
+      portalProviderAPI: portalProviderAPI,
+      providerFactory: providerFactory,
+      schema: defaultSchema
+    };
+    return plugins.reduce(function (acc, editorPlugin) {
+      var _editorPlugin$pmPlugi;
+      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
+        var plugin = _ref2.plugin;
+        try {
+          var pmPlugin = plugin(pmPluginFactoryParams);
+          if (pmPlugin) {
+            acc.push(pmPlugin);
+          }
+        } catch (_unused) {}
+      });
+      return acc;
+    }, []);
+  }, [plugins, portalProviderAPI]);
+  var nodeViews = useMemo(function () {
+    return pmPlugins.reduce(function (acc, plugin) {
+      return Object.assign(acc, plugin.props.nodeViews);
+    }, {});
+  }, [pmPlugins]);
+  var markViews = useMemo(function () {
+    return pmPlugins.reduce(function (acc, plugin) {
+      return Object.assign(acc, plugin.props.markViews);
+    }, {});
+  }, [pmPlugins]);
+  var editorView = useMemo(function () {
+    return new SSREditorView(null, {
+      state: EditorState.create({
+        schema: defaultSchema,
+        plugins: pmPlugins
+      })
+    });
+  }, [pmPlugins]);
+  var serializer = useMemo(function () {
+    var toDomNodeRenderers = Object.fromEntries(Object.entries(defaultSchema.nodes).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        nodeName = _ref4[0],
+        nodeType = _ref4[1];
+      return [nodeName, nodeType.spec.toDOM];
+    }).filter(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        toDOM = _ref6[1];
+      return !!toDOM;
+    }));
+    var toDomMarkRenderers = Object.fromEntries(Object.entries(defaultSchema.marks).map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        markName = _ref8[0],
+        markType = _ref8[1];
+      return [markName, markType.spec.toDOM];
+    }).filter(function (_ref9) {
+      var _ref0 = _slicedToArray(_ref9, 2),
+        toDOM = _ref0[1];
+      return !!toDOM;
+    }));
+    var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+      var _ref10 = _slicedToArray(_ref1, 2),
+        nodeName = _ref10[0],
+        nodeViewFactory = _ref10[1];
+      return [nodeName, function (node) {
+        var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+          return 0;
+        }, [], DecorationSet.create(node, []));
+        return {
+          dom: nodeViewInstance.dom,
+          contentDOM: nodeViewInstance.contentDOM
+        };
+      }];
+    }));
+    var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+        markName = _ref12[0],
+        markViewFactory = _ref12[1];
+      return [markName, function (mark) {
+        var markViewInstance = markViewFactory(mark, editorView, false);
+        return {
+          dom: markViewInstance.dom,
+          contentDOM: markViewInstance.contentDOM
+        };
+      }];
+    }));
+    return new DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+      text: renderText
+    }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+  }, [editorView, markViews, nodeViews]);
+  var editorHTML = useMemo(function () {
+    try {
+      var pmDoc = buildDoc(editorView.state.schema);
+      if (!pmDoc) {
+        return undefined;
+      }
+      return serializer.serializeFragment(pmDoc.content);
+    } catch (_unused2) {
+      return undefined;
+    }
+  }, [editorView.state.schema, buildDoc, serializer]);
+  var containerRef = useRef(null);
+  useLayoutEffect(function () {
+    if (containerRef.current && editorHTML) {
+      containerRef.current.innerHTML = '';
+      containerRef.current.appendChild(editorHTML);
+    }
+  }, [editorHTML]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: divProps.id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: divProps.className,
+    "aria-label": divProps['aria-label'],
+    "aria-describedby": divProps['aria-describedby'],
+    "data-editor-id": divProps['data-editor-id'],
+    "data-vc-ignore-if-no-layout-shift": true,
+    "aria-multiline": true,
+    role: "textbox"
+    // @ts-expect-error - contenteditable is not exist in div attributes
+    ,
+    contenteditable: "true",
+    "data-gramm": "false",
+    translate: "no"
+  });
+}
+function renderText(node) {
+  return node.text || '';
+}

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { EditorSSRRenderer } from './editor-ssr-renderer/EditorSSRRenderer';

package/dist/types/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { EditorPluginInjectionAPI, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Schema } from '@atlaskit/editor-prosemirror/model';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+interface Props {
+    'aria-describedby'?: string;
+    'aria-label': string;
+    buildDoc: (schema: Schema) => PMNode | undefined;
+    className: string;
+    'data-editor-id': string;
+    id: string;
+    intl: IntlShape;
+    pluginInjectionAPI?: EditorPluginInjectionAPI;
+    portalProviderAPI: PortalProviderAPI;
+    preset: EditorPresetBuilder<any, any>;
+}
+export declare function EditorSSRRenderer({ preset, buildDoc, portalProviderAPI, intl, pluginInjectionAPI, ...divProps }: Props): React.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { EditorSSRRenderer } from './editor-ssr-renderer/EditorSSRRenderer';

package/dist/types-ts4.5/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { EditorPluginInjectionAPI, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Schema } from '@atlaskit/editor-prosemirror/model';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+interface Props {
+    'aria-describedby'?: string;
+    'aria-label': string;
+    buildDoc: (schema: Schema) => PMNode | undefined;
+    className: string;
+    'data-editor-id': string;
+    id: string;
+    intl: IntlShape;
+    pluginInjectionAPI?: EditorPluginInjectionAPI;
+    portalProviderAPI: PortalProviderAPI;
+    preset: EditorPresetBuilder<any, any>;
+}
+export declare function EditorSSRRenderer({ preset, buildDoc, portalProviderAPI, intl, pluginInjectionAPI, ...divProps }: Props): React.JSX.Element;
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1 @@
+export { EditorSSRRenderer } from './editor-ssr-renderer/EditorSSRRenderer';

package/example-helpers/createExample.tsx

@@ -1,13 +1,55 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IntlProvider } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { CardClient, SmartCardProvider } from '@atlaskit/link-provider';
+import { getExamplesProviders } from '@af/editor-examples-helpers/utils';
+import { useConfluenceFullPagePreset } from '@af/editor-examples-helpers/example-presets';
+import { IntlProvider, useIntl } from 'react-intl-next';
 import type { DocNode } from '@atlaskit/adf-schema';
+import { EditorSSRRenderer } from '../src';
+
+class SSRPortalProviderAPI implements PortalProviderAPI {
+	destroy() {}
+	remove() {}
+	render() {}
+}
+
+function SSREditor({ adf }: { adf: DocNode }) {
+	const intl = useIntl();
+	const providers = useMemo(() => getExamplesProviders({ sanitizePrivateContent: true }), []);
+
+	const { preset } = useConfluenceFullPagePreset({
+		editorAppearance: 'full-page',
+		overridedFullPagePresetProps: {
+			providers,
+		},
+	});
+
+	return (
+		<EditorSSRRenderer
+			intl={intl}
+			preset={preset}
+			buildDoc={(schema) => PMNode.fromJSON(schema, adf)}
+			portalProviderAPI={new SSRPortalProviderAPI()}
+			id="ak-editor-textarea"
+			data-editor-id="6f03e411-00a8-448b-bbc0-66f350895a5e"
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className="ProseMirror ua-chrome"
+			aria-label="Main content area, start typing to enter text."
+		/>
+	);
+}
 
 export function createExample(adf: DocNode) {
 	return () => {
+		const smartCardClient = useMemo(() => new CardClient('staging'), []);
+
 		return (
 			<IntlProvider locale={'en'}>
-				<pre>{JSON.stringify(adf, null, 2)}</pre>
+				<SmartCardProvider client={smartCardClient}>
+					<SSREditor adf={adf} />
+				</SmartCardProvider>
 			</IntlProvider>
 		);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"description": "SSR Renderer based on Editor",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
@@ -27,14 +27,13 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/adf-schema": "^51.5.1",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@babel/runtime": "^7.0.0"
-	},
-	"devDependencies": {
-		"@atlaskit/adf-schema": "^51.4.0",
-		"@emotion/react": "^11.7.1"
+		"@babel/runtime": "^7.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
+		"@atlaskit/editor-common": "^110.40.0",
 		"react": "^18.2.0"
 	}
 }