@atlaskit/editor-plugin-synced-block 0.1.0

package/dist/es2019/pm-plugins/SyncClient.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { getContentPropertyIdFromAri, getPageIdFromAri } from '../ui/extensions/synced-block/utils/ari';
+import { getContentProperty, updateContentProperty } from '../ui/extensions/synced-block/utils/content-property';
+import { parseSyncedBlockContentPropertyValue, stringifySyncedBlockContentPropertyValue } from '../ui/extensions/synced-block/utils/synced-block';
+const transformer = new JSONTransformer();
+const toJSON = node => transformer.encodeNode(node);
+const getCacheKey = ({
+  sourceDocumentAri,
+  contentAri,
+  contentPropertyKey
+}) => `${sourceDocumentAri}-${contentAri}-${contentPropertyKey}`;
+export class SyncClient {
+  constructor() {
+    _defineProperty(this, "requestMap", new Map());
+    this.requestMap = new Map();
+  }
+  getRequestState(key) {
+    return this.requestMap.get(key);
+  }
+  setRequestState(key, state) {
+    this.requestMap.set(key, state);
+  }
+  async sendRequest({
+    sourceDocumentAri,
+    contentAri,
+    contentPropertyKey,
+    value
+  }) {
+    const pageId = getPageIdFromAri(sourceDocumentAri);
+    const contentPropertyId = getContentPropertyIdFromAri(contentAri);
+    try {
+      const contentProperty = await getContentProperty({
+        pageId,
+        contentPropertyId
+      });
+      const updatedValue = stringifySyncedBlockContentPropertyValue({
+        ...parseSyncedBlockContentPropertyValue(contentProperty.value),
+        ...JSON.parse(value)
+      });
+      await updateContentProperty({
+        pageId,
+        key: contentPropertyKey,
+        value: updatedValue,
+        signal: undefined
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to update content property:', error);
+    }
+  }
+  syncContent({
+    sourceDocumentAri,
+    contentAri,
+    contentPropertyKey,
+    node
+  }) {
+    const nodeAdf = toJSON(node);
+    const key = getCacheKey({
+      sourceDocumentAri,
+      contentAri,
+      contentPropertyKey
+    });
+    const value = stringifySyncedBlockContentPropertyValue({
+      adf: nodeAdf
+    });
+    const requestState = this.getRequestState(key) || {
+      timeout: null,
+      pendingValue: null,
+      isSending: false
+    };
+    requestState.pendingValue = value;
+    if (requestState.isSending) {
+      return;
+    }
+    if (requestState.timeout) {
+      clearTimeout(requestState.timeout);
+    }
+    const send = async () => {
+      if (requestState.isSending) {
+        return;
+      }
+      requestState.isSending = true;
+      try {
+        await this.sendRequest({
+          sourceDocumentAri,
+          contentAri,
+          contentPropertyKey,
+          value: requestState.pendingValue || ''
+        });
+        requestState.pendingValue = null;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to send synced block content:', error);
+      } finally {
+        requestState.isSending = false;
+      }
+    };
+    requestState.timeout = setTimeout(send, 1000);
+    this.setRequestState(key, requestState);
+  }
+}

package/dist/es2019/pm-plugins/main.js

@@ -0,0 +1,47 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SyncClient } from './SyncClient';
+import { findSyncedBlockParent } from './utils';
+export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+
+export const createPlugin = () => {
+  const syncClient = new SyncClient();
+  return new SafePlugin({
+    key: syncedBlockPluginKey,
+    state: {
+      init() {
+        return {};
+      },
+      apply: (tr, currentPluginState) => {
+        if (tr.docChanged) {
+          const $pos = tr.selection.$from;
+          const syncedBlockParent = findSyncedBlockParent($pos);
+          if (syncedBlockParent) {
+            const {
+              node,
+              attributes
+            } = syncedBlockParent;
+            const {
+              sourceDocumentAri,
+              contentAri,
+              contentPropertyKey
+            } = attributes.parameters;
+            syncClient.syncContent({
+              sourceDocumentAri,
+              contentAri,
+              contentPropertyKey,
+              node
+            });
+          }
+        }
+        const meta = tr.getMeta(syncedBlockPluginKey);
+        if (meta) {
+          return meta;
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

package/dist/es2019/pm-plugins/utils.js

@@ -0,0 +1,13 @@
+import { isSyncedBlockAttributes } from '../ui/extensions/synced-block/utils/synced-block';
+export const findSyncedBlockParent = $pos => {
+  for (let i = 0; i <= $pos.depth; i++) {
+    const node = $pos.node(i);
+    if (isSyncedBlockAttributes(node.attrs)) {
+      return {
+        node,
+        attributes: node.attrs
+      };
+    }
+  }
+  return;
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createPlugin } from './pm-plugins/main';
+import { GlobalStylesWrapper } from './ui/extensions/synced-block/components/GlobalStyles';
+export const syncedBlockPlugin = () => {
+  return {
+    name: 'syncedBlock',
+    pmPlugins() {
+      return [{
+        name: 'syncedBlockPlugin',
+        plugin: createPlugin
+      }];
+    },
+    contentComponent() {
+      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
+    }
+  };
+};

package/dist/es2019/syncedBlockPluginType.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/extensions/synced-block/components/GlobalStyles.js

@@ -0,0 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @atlaskit/ui-styling-standard/no-global-styles
+import { css, Global, jsx } from '@emotion/react';
+const extensionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[extensionkey="synced-block:reference"] .ak-renderer-wrapper > div:last-of-type': {
+    padding: "var(--ds-space-250, 20px)",
+    paddingRight: "var(--ds-space-250, 20px)"
+  }
+});
+export const GlobalStylesWrapper = () => {
+  return jsx(Global, {
+    styles: [extensionStyles]
+  });
+};

package/dist/es2019/ui/extensions/synced-block/components/SyncedBlockLiveView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useLiveSyncedBlockContent } from '../hooks/useLiveSyncedBlockContent';
+import SyncedBlockRenderer from './SyncedBlockRenderer';
+const SyncedBlockLiveView = ({
+  sourceDocumentAri,
+  contentAri
+}) => {
+  const syncedBlockContent = useLiveSyncedBlockContent({
+    sourceDocumentAri,
+    contentAri
+  });
+  if (!syncedBlockContent) {
+    return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  }
+  return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
+    syncedBlockContent: syncedBlockContent
+  });
+};
+export default SyncedBlockLiveView;

package/dist/es2019/ui/extensions/synced-block/components/SyncedBlockRenderer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ReactRenderer } from '@atlaskit/renderer';
+import { RendererActionsContext } from '@atlaskit/renderer/actions';
+const SyncedBlockRenderer = ({
+  syncedBlockContent
+}) => {
+  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement(ReactRenderer, {
+    adfStage: "stage0"
+    // @ts-ignore
+    ,
+    document: {
+      type: 'doc',
+      version: 1,
+      content: syncedBlockContent.adf.content
+    },
+    appearance: "full-page"
+  }));
+};
+export default SyncedBlockRenderer;

package/dist/es2019/ui/extensions/synced-block/constants.js

@@ -0,0 +1,26 @@
+// hello.atlassian.net cloud id
+const HELLO_CLOUD_ID = 'a436116f-02ce-4520-8fbb-7301462a1674';
+
+// spike page https://hello.atlassian.net/wiki/spaces/~7120208ef57ce4d614485e876489301a16b906/pages/5626233808
+const TEST_PAGE_ID = '5626233808';
+export const getPageId = () => {
+  var _window$location$href, _window$location$href2, _window$location$path;
+  return (
+    // eslint-disable-next-line require-unicode-regexp
+    ((_window$location$href = window.location.href.match(/pageId=(\d+)/)) === null || _window$location$href === void 0 ? void 0 : _window$location$href[1]) || ( // eslint-disable-next-line require-unicode-regexp
+    (_window$location$href2 = window.location.href.match(/pages\/edit-v2\/(\d+)/)) === null || _window$location$href2 === void 0 ? void 0 : _window$location$href2[1]) || ( // eslint-disable-next-line require-unicode-regexp
+    (_window$location$path = window.location.pathname.match(/pages\/(\d+)/)) === null || _window$location$path === void 0 ? void 0 : _window$location$path[1]) ||
+    // view page or live doc
+    TEST_PAGE_ID
+  );
+};
+/**
+ * This by no means is a stable way to get the cloud id, but it works for now.
+ * We should switch passing the cloud id from Confluence to a Editor plugin,
+ * for instance the user preferences plugin would have a seperate place for user and cloud info
+ * @returns the cloud id from the initial state
+ */
+export const getCloudId = () => {
+  var _INITIAL_STATE__, _INITIAL_STATE__$meta;
+  return ((_INITIAL_STATE__ = window.__INITIAL_STATE__) === null || _INITIAL_STATE__ === void 0 ? void 0 : (_INITIAL_STATE__$meta = _INITIAL_STATE__.meta) === null || _INITIAL_STATE__$meta === void 0 ? void 0 : _INITIAL_STATE__$meta['cloud-id']) || HELLO_CLOUD_ID;
+};

package/dist/es2019/ui/extensions/synced-block/getSyncedBlockExtensionProvider.js

@@ -0,0 +1,5 @@
+import { DefaultExtensionProvider } from '@atlaskit/editor-common/extensions';
+import { getSyncedBlockManifest } from './manifest';
+export const getSyncedBlockExtensionProvider = () => {
+  return new DefaultExtensionProvider([getSyncedBlockManifest()]);
+};

package/dist/es2019/ui/extensions/synced-block/hooks/useLiveSyncedBlockContent.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { usePollContentProperty } from '../hooks/usePollContentProperty';
+import { parseSyncedBlockContentPropertyValue } from '../utils/synced-block';
+export const useLiveSyncedBlockContent = ({
+  sourceDocumentAri,
+  contentAri
+}) => {
+  const contentProperty = usePollContentProperty({
+    sourceDocumentAri,
+    contentAri
+  });
+  return useMemo(() => {
+    if (!contentProperty) {
+      return null;
+    }
+    try {
+      return parseSyncedBlockContentPropertyValue(contentProperty.value);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to extract synced block content:', error);
+      return null;
+    }
+  }, [contentProperty]);
+};

package/dist/es2019/ui/extensions/synced-block/hooks/usePollContentProperty.js

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import { getContentPropertyIdFromAri, getPageIdFromAri } from '../utils/ari';
+import { getContentProperty } from '../utils/content-property';
+const POLLING_INTERVAL = 1000;
+const cache = new Map();
+const inFlightRequests = new Map();
+const subscribers = new Map();
+const pollingTimeouts = new Map();
+const lastRequestTimes = new Map();
+const getRequestKey = (pageId, contentPropertyId) => `${pageId}:${contentPropertyId}`;
+const fetchContentPropertyWithDedup = (pageId, contentPropertyId) => {
+  const requestKey = getRequestKey(pageId, contentPropertyId);
+  lastRequestTimes.set(requestKey, Date.now());
+  const inFlightRequest = inFlightRequests.get(requestKey);
+  if (inFlightRequest) {
+    return inFlightRequest;
+  }
+  const requestPromise = getContentProperty({
+    pageId,
+    contentPropertyId
+  }).then(result => {
+    cache.set(requestKey, result);
+    const subscribersForKey = subscribers.get(requestKey);
+    if (subscribersForKey) {
+      subscribersForKey.forEach(callback => callback(result));
+    }
+    inFlightRequests.delete(requestKey);
+    if (subscribersForKey && subscribersForKey.size > 0) {
+      scheduleNextPoll(pageId, contentPropertyId);
+    }
+    return result;
+  }).catch(error => {
+    inFlightRequests.delete(requestKey);
+    const subscribersForKey = subscribers.get(requestKey);
+    if (subscribersForKey && subscribersForKey.size > 0) {
+      scheduleNextPoll(pageId, contentPropertyId);
+    }
+    throw error;
+  });
+  inFlightRequests.set(requestKey, requestPromise);
+  return requestPromise;
+};
+const scheduleNextPoll = (pageId, contentPropertyId) => {
+  const requestKey = getRequestKey(pageId, contentPropertyId);
+  const existingTimeout = pollingTimeouts.get(requestKey);
+  if (existingTimeout) {
+    clearTimeout(existingTimeout);
+  }
+  const lastRequestTime = lastRequestTimes.get(requestKey) || 0;
+  const timeElapsed = Date.now() - lastRequestTime;
+  const delay = Math.max(100, POLLING_INTERVAL - timeElapsed);
+  const timeout = setTimeout(() => {
+    const subscribersForKey = subscribers.get(requestKey);
+    if (subscribersForKey && subscribersForKey.size > 0) {
+      fetchContentPropertyWithDedup(pageId, contentPropertyId).catch(error => {
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch content property:', error);
+      });
+    } else {
+      pollingTimeouts.delete(requestKey);
+    }
+  }, delay);
+  pollingTimeouts.set(requestKey, timeout);
+};
+export const usePollContentProperty = ({
+  sourceDocumentAri,
+  contentAri
+}) => {
+  const [contentProperty, setContentProperty] = useState();
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    const pageId = getPageIdFromAri(sourceDocumentAri);
+    const contentPropertyId = getContentPropertyIdFromAri(contentAri);
+    const requestKey = getRequestKey(pageId, contentPropertyId);
+    const subscribersForKey = subscribers.get(requestKey) || new Set();
+    if (!subscribers.has(requestKey)) {
+      subscribers.set(requestKey, subscribersForKey);
+    }
+    subscribersForKey.add(setContentProperty);
+    const cachedValue = cache.get(requestKey);
+    if (cachedValue) {
+      setContentProperty(cachedValue);
+    }
+    if (subscribersForKey.size === 1 || !initializedRef.current) {
+      initializedRef.current = true;
+      fetchContentPropertyWithDedup(pageId, contentPropertyId).catch(error => {
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch content property:', error);
+      });
+    }
+    return () => {
+      subscribersForKey.delete(setContentProperty);
+      if (subscribersForKey.size === 0) {
+        subscribers.delete(requestKey);
+        const existingTimeout = pollingTimeouts.get(requestKey);
+        if (existingTimeout) {
+          clearTimeout(existingTimeout);
+          pollingTimeouts.delete(requestKey);
+        }
+      }
+    };
+  }, [sourceDocumentAri, contentAri]);
+  const pageId = getPageIdFromAri(sourceDocumentAri);
+  const contentPropertyId = getContentPropertyIdFromAri(contentAri);
+  const requestKey = getRequestKey(pageId, contentPropertyId);
+  return contentProperty || cache.get(requestKey);
+};

package/dist/es2019/ui/extensions/synced-block/index.js

@@ -0,0 +1,5 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { getSyncedBlockExtensionProvider } from './getSyncedBlockExtensionProvider';
+export { getSyncedBlockManifest } from './manifest';

package/dist/es2019/ui/extensions/synced-block/manifest.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
+import SyncedBlockLiveView from './components/SyncedBlockLiveView';
+import { getPageId } from './constants';
+import { getConfluencePageAri, getContentPropertyAri } from './utils/ari';
+import { createContentProperty } from './utils/content-property';
+import { SYNCED_BLOCK_EXTENSION_KEY, SYNCED_BLOCK_EXTENSION_TYPE, SYNCED_BLOCK_REFERENCE_KEY, SYNCED_BLOCK_REFERENCE_NODE, SYNCED_BLOCK_SOURCE_KEY, SYNCED_BLOCK_SOURCE_NODE, getDefaultSyncedBlockContent, isSyncedBlockAttributes, stringifySyncedBlockContentPropertyValue } from './utils/synced-block';
+const getRandomId = () => {
+  if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
+    return new Date().toISOString();
+  }
+  return globalThis.crypto.randomUUID();
+};
+
+// Remaining tasks
+// - Better location for content sync implementation – currently done in SyncedBlockSource renderer which won't work in editor
+// 		- Could implement an editor plugin to do this, if there's no native way to do it with extensions
+// - Implement separate content property for storage of the metadata of a synced block, separate from the content
+// 		- Update polling to use the metadata content property, then if metadata updated, fetch the content property
+// - Investigate re-rendering of SyncedBlockReference in editor on every document change (is this just atlaskit behavior?)
+// - On copy of the synced block, transform into a reference
+// - Move implementation into Confluence and test in branch environment
+// - Dealing with orphaned synced block content properties data
+// - Getting current page id in editor context and the cloud id
+// - Explore hiding the frame for the extension in the editor, currently using `__hideFrame: true` and commented code to enable
+export const getSyncedBlockManifest = () => ({
+  title: 'Synced Block',
+  type: SYNCED_BLOCK_EXTENSION_TYPE,
+  key: SYNCED_BLOCK_EXTENSION_KEY,
+  description: 'Synced block spike',
+  icons: {
+    // Ignored via go/ees005
+    // eslint-disable-next-line require-await
+    '48': async () => () => /*#__PURE__*/React.createElement(SmartLinkIcon, {
+      label: "Synced Block",
+      size: "medium"
+    })
+  },
+  modules: {
+    quickInsert: [{
+      key: 'quick-insert-synced-block-source',
+      action: async _api => {
+        const contentPropertyKey = `synced-block-` + getRandomId();
+        const content = getDefaultSyncedBlockContent();
+        const value = stringifySyncedBlockContentPropertyValue({
+          adf: content
+        });
+        const contentProperty = await createContentProperty({
+          pageId: getPageId(),
+          key: contentPropertyKey,
+          value
+        });
+        const attributes = {
+          extensionType: SYNCED_BLOCK_EXTENSION_TYPE,
+          extensionKey: SYNCED_BLOCK_SOURCE_KEY,
+          parameters: {
+            sourceDocumentAri: getConfluencePageAri(getPageId()),
+            contentAri: getContentPropertyAri(contentProperty.id),
+            contentPropertyKey
+          },
+          localId: 'testId'
+        };
+        content.attrs = attributes;
+        return content;
+      }
+    }],
+    nodes: {
+      [SYNCED_BLOCK_SOURCE_NODE]: {
+        type: 'bodiedExtension',
+        // Ignored via go/ees005
+        // eslint-disable-next-line require-await
+        render: async () => props => {
+          if (!isSyncedBlockAttributes(props.node)) {
+            return null;
+          }
+          const {
+            sourceDocumentAri,
+            contentAri
+          } = props.node.parameters;
+          return /*#__PURE__*/React.createElement(SyncedBlockLiveView, {
+            sourceDocumentAri: sourceDocumentAri,
+            contentAri: contentAri
+          });
+        },
+        // @ts-expect-error
+        __hideFrame: true
+      },
+      [SYNCED_BLOCK_REFERENCE_NODE]: {
+        type: 'extension',
+        // Ignored via go/ees005
+        // eslint-disable-next-line require-await
+        render: async () => props => {
+          if (!isSyncedBlockAttributes(props.node)) {
+            return null;
+          }
+          const {
+            sourceDocumentAri,
+            contentAri
+          } = props.node.parameters;
+          return /*#__PURE__*/React.createElement(SyncedBlockLiveView, {
+            sourceDocumentAri: sourceDocumentAri,
+            contentAri: contentAri
+          });
+        },
+        // @ts-expect-error
+        __hideFrame: true
+      }
+    },
+    contextualToolbars: [{
+      context: {
+        type: 'extension',
+        nodeType: 'bodiedExtension',
+        extensionType: SYNCED_BLOCK_EXTENSION_TYPE,
+        extensionKey: SYNCED_BLOCK_SOURCE_KEY
+      },
+      toolbarItems: [{
+        key: 'toolbar-item-key',
+        label: 'Referenece',
+        display: 'icon',
+        tooltip: 'Create reference',
+        // Ignored via go/ees005
+        // eslint-disable-next-line require-await
+        icon: async () => () => /*#__PURE__*/React.createElement(SmartLinkIcon, {
+          label: "Synced Block",
+          size: "medium"
+        }),
+        // Ignored via go/ees005
+        // eslint-disable-next-line require-await
+        action: async (contextNode, api) => {
+          var _contextNode$attrs, _contextNode$attrs2, _contextNode$attrs2$p, _contextNode$attrs3, _contextNode$attrs3$p;
+          api.doc.insertAfter((_contextNode$attrs = contextNode.attrs) === null || _contextNode$attrs === void 0 ? void 0 : _contextNode$attrs.localId, {
+            type: 'extension',
+            attrs: {
+              extensionType: SYNCED_BLOCK_EXTENSION_TYPE,
+              extensionKey: SYNCED_BLOCK_REFERENCE_KEY,
+              parameters: {
+                sourceDocumentAri: (_contextNode$attrs2 = contextNode.attrs) === null || _contextNode$attrs2 === void 0 ? void 0 : (_contextNode$attrs2$p = _contextNode$attrs2.parameters) === null || _contextNode$attrs2$p === void 0 ? void 0 : _contextNode$attrs2$p.sourceDocumentAri,
+                contentAri: (_contextNode$attrs3 = contextNode.attrs) === null || _contextNode$attrs3 === void 0 ? void 0 : (_contextNode$attrs3$p = _contextNode$attrs3.parameters) === null || _contextNode$attrs3$p === void 0 ? void 0 : _contextNode$attrs3$p.contentAri
+              },
+              localId: 'testId'
+            }
+          });
+        }
+      }]
+    }]
+  }
+});

package/dist/es2019/ui/extensions/synced-block/utils/ari.js

@@ -0,0 +1,19 @@
+import { getCloudId } from '../constants';
+export const getConfluencePageAri = pageId => `ari:cloud:confluence:${getCloudId()}:page/${pageId}`;
+export const getPageIdFromAri = ari => {
+  // eslint-disable-next-line require-unicode-regexp
+  const match = ari.match(/ari:cloud:confluence:[^:]+:page\/(\d+)/);
+  if (match) {
+    return match[1];
+  }
+  throw new Error(`Invalid page ARI: ${ari}`);
+};
+export const getContentPropertyAri = contentPropertyId => `ari:cloud:confluence:${getCloudId()}:content/${contentPropertyId}`;
+export const getContentPropertyIdFromAri = ari => {
+  // eslint-disable-next-line require-unicode-regexp
+  const match = ari.match(/ari:cloud:confluence:[^:]+:content\/([^/]+)/);
+  if (match) {
+    return match[1];
+  }
+  throw new Error(`Invalid content property ARI: ${ari}`);
+};