@atlaskit/editor-plugin-synced-block 1.0.0 → 2.0.0

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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-// 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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,5 +0,0 @@
-// 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

@@ -1,172 +0,0 @@
-import React from 'react';
-import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
-import { DOMSerializer, Fragment, Mark } from '@atlaskit/editor-prosemirror/model';
-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();
-};
-const copyToClipboard = (adf, schema) => {
-  if (!schema) {
-    throw new Error('copyToClipboard(): Schema is required.');
-  }
-
-  // Validate the given ADF
-  const nodeType = schema.nodes[adf.type];
-  if (!nodeType) {
-    throw new Error(`copyToClipboard(): Invalid ADF type '${adf.type}'.`);
-  }
-  const fragment = Fragment.fromJSON(schema, adf.content);
-  const marks = (adf.marks || []).map(markEntity => Mark.fromJSON(schema, markEntity));
-  const newNode = nodeType === null || nodeType === void 0 ? void 0 : nodeType.createChecked(adf.attrs, fragment, marks);
-  if (!newNode) {
-    throw new Error('copyToClipboard(): Could not create a node for given ADFEntity.');
-  }
-  const domNode = DOMSerializer.fromSchema(schema).serializeNode(newNode);
-  const div = document.createElement('div');
-  div.appendChild(domNode);
-  copyHTMLToClipboard(div);
-};
-
-// 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 = schema => ({
-  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: 'Copy reference to clipboard',
-        // 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 => {
-          try {
-            var _contextNode$attrs, _contextNode$attrs$pa, _contextNode$attrs2, _contextNode$attrs2$p;
-            copyToClipboard({
-              type: 'extension',
-              attrs: {
-                extensionType: SYNCED_BLOCK_EXTENSION_TYPE,
-                extensionKey: SYNCED_BLOCK_REFERENCE_KEY,
-                parameters: {
-                  sourceDocumentAri: (_contextNode$attrs = contextNode.attrs) === null || _contextNode$attrs === void 0 ? void 0 : (_contextNode$attrs$pa = _contextNode$attrs.parameters) === null || _contextNode$attrs$pa === void 0 ? void 0 : _contextNode$attrs$pa.sourceDocumentAri,
-                  contentAri: (_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.contentAri
-                },
-                localId: 'testId'
-              }
-            }, schema);
-          } catch (e) {}
-        }
-      }]
-    }]
-  }
-});

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

@@ -1,19 +0,0 @@
-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}`);
-};

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

@@ -1,108 +0,0 @@
-import { getCloudId } from '../constants';
-import { getConfluencePageAri } from './ari';
-
-// Uncomment for proxy in Atlaskit, which will route to hello.atlassian.net
-// const BASE_URL = 'https://localhost:9876';
-const BASE_URL = `/gateway/api/ex/confluence/${getCloudId()}`;
-const API_BASE_URL = `${BASE_URL}/wiki/api/v2`;
-const COMMON_HEADERS = {
-  'Content-Type': 'application/json',
-  Accept: 'application/json'
-};
-const getContentPropertiesUrl = ({
-  pageId,
-  contentPropertyId
-}) => {
-  const url = `${API_BASE_URL}/pages/${pageId}/properties`;
-  if (contentPropertyId) {
-    return `${url}/${contentPropertyId}`;
-  }
-  return url;
-};
-const getGraphQLPropertiesUrl = () => {
-  return `/cgraphql/api/graphql`;
-};
-export const createContentProperty = async ({
-  pageId,
-  key,
-  value
-}) => {
-  const url = getContentPropertiesUrl({
-    pageId
-  });
-  const body = JSON.stringify({
-    key,
-    value
-  });
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: COMMON_HEADERS,
-    body
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to create content property: ${response.statusText}`);
-  }
-  const contentProperty = await response.json();
-  return contentProperty;
-};
-export const getContentProperty = async ({
-  pageId,
-  contentPropertyId,
-  signal
-}) => {
-  const url = getContentPropertiesUrl({
-    pageId,
-    contentPropertyId
-  });
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: COMMON_HEADERS,
-    signal
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to get content property: ${response.statusText}`);
-  }
-  const contentProperty = await response.json();
-  return contentProperty;
-};
-const getQuery = (documentARI, key, value) => {
-  return `mutation {
-	  confluence {
-	    updateValuePageProperty(input: {
-	      pageId: "${documentARI}",
-	      key: "${key}",
-	      value: "${value}",
-	      useSameVersion: true
-	    }) {
-	      pageProperty {
-	        key,
-	        value
-	      }
-	    }
-	  }
-	}`;
-};
-export const updateContentProperty = async ({
-  pageId,
-  key,
-  value
-}) => {
-  const url = getGraphQLPropertiesUrl();
-  const documentARI = getConfluencePageAri(pageId);
-
-  // eslint-disable-next-line require-unicode-regexp
-  const query = getQuery(documentARI, key, value.replace(/"/g, '\\"'));
-  const bodyData = {
-    query
-  };
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: COMMON_HEADERS,
-    body: JSON.stringify(bodyData)
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to update content property: ${response.statusText}`);
-  }
-  const contentProperty = await response.json();
-  return contentProperty;
-};

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

@@ -1,57 +0,0 @@
-export const SYNCED_BLOCK_EXTENSION_TYPE = 'com.atlassian.platform.extensions';
-export const SYNCED_BLOCK_EXTENSION_KEY = 'synced-block';
-export const SYNCED_BLOCK_SOURCE_NODE = 'source';
-export const SYNCED_BLOCK_SOURCE_KEY = `${SYNCED_BLOCK_EXTENSION_KEY}:${SYNCED_BLOCK_SOURCE_NODE}`;
-export const SYNCED_BLOCK_REFERENCE_NODE = 'reference';
-export const SYNCED_BLOCK_REFERENCE_KEY = `${SYNCED_BLOCK_EXTENSION_KEY}:${SYNCED_BLOCK_REFERENCE_NODE}`;
-export const isSyncedBlockAttributes = attributes => {
-  return !!attributes && typeof attributes === 'object' && 'extensionKey' in attributes && (attributes.extensionKey === SYNCED_BLOCK_SOURCE_KEY || attributes.extensionKey === SYNCED_BLOCK_REFERENCE_KEY);
-};
-export const getDefaultSyncedBlockContent = () => {
-  const attributes = {
-    extensionType: SYNCED_BLOCK_EXTENSION_TYPE,
-    extensionKey: SYNCED_BLOCK_SOURCE_KEY,
-    parameters: {
-      sourceDocumentAri: '',
-      contentAri: '',
-      contentPropertyKey: ''
-    },
-    localId: ''
-  };
-  return {
-    type: 'bodiedExtension',
-    attrs: attributes,
-    content: [{
-      type: 'paragraph',
-      content: [{
-        type: 'text',
-        text: 'This is a synced block. Please edit the source document to update the content.'
-      }]
-    }]
-  };
-};
-export const parseSyncedBlockContentPropertyValue = value => {
-  try {
-    if (typeof value === 'string') {
-      return JSON.parse(value);
-    }
-    return value;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Failed to parse synced block content:', error);
-    return {
-      adf: getDefaultSyncedBlockContent()
-    };
-  }
-};
-export const stringifySyncedBlockContentPropertyValue = value => {
-  try {
-    return JSON.stringify(value);
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Failed to serialize synced block content:', error);
-    return JSON.stringify({
-      adf: getDefaultSyncedBlockContent()
-    });
-  }
-};