@bpmn-io/form-js-playground 1.7.2 → 1.8.0

package/dist/index.es.js

@@ -145,7 +145,7 @@ function completions(context) {
   };
 }
 
-const NO_LINT_CLS = 'fjs-no-json-lint';
+const NO_LINT_CLS = 'fjs-cm-no-lint';
 
 /**
  * @param {object} options
@@ -160,67 +160,53 @@ function JSONEditor(options = {}) {
     readonly = false
   } = options;
   const emitter = mitt();
-  let language = new Compartment().of(json());
-  let tabSize = new Compartment().of(EditorState.tabSize.of(2));
+  const languageCompartment = new Compartment().of(json());
+  const tabSizeCompartment = new Compartment().of(EditorState.tabSize.of(2));
+  const autocompletionConfCompartment = new Compartment();
+  const placeholderLinterExtension = createPlaceholderLinterExtension();
   let container = null;
-
-  /**
-   * @typedef {Array<string>} Variables
-   */
-
-  const autocompletionConf = new Compartment();
-  const linterExtension = linter(jsonParseLinter());
-
-  // this sets no-linting mode if placeholders are present
-  const placeholderLinterExtension = linter(view => {
-    const placeholders = view.dom.querySelectorAll('.cm-placeholder');
-    if (placeholders.length > 0) {
-      set(container, NO_LINT_CLS);
-    } else {
-      unset(container, NO_LINT_CLS);
-    }
-    return [];
-  });
-  function createState(doc, extensions = [], variables = []) {
-    return EditorState.create({
-      doc,
-      extensions: [basicSetup, language, tabSize, linterExtension, placeholderLinterExtension, lintGutter(), autocompletionConf.of(variablesFacet.of(variables)), autocompletionExtension(), keymap.of([indentWithTab]), editorPlaceholder ? placeholder(editorPlaceholder) : [], ...extensions]
-    });
-  }
-  function createView(readonly) {
-    const updateListener = EditorView.updateListener.of(update => {
+  function createState(doc, variables = []) {
+    const extensions = [basicSetup, languageCompartment, tabSizeCompartment, lintGutter(), linter(jsonParseLinter()), placeholderLinterExtension, autocompletionConfCompartment.of(variablesFacet.of(variables)), autocompletionExtension(), keymap.of([indentWithTab]), editorPlaceholder ? placeholder(editorPlaceholder) : [], EditorView.updateListener.of(update => {
       if (update.docChanged) {
         emitter.emit('changed', {
-          value: update.view.state.doc.toString()
+          value: update.state.doc.toString()
         });
       }
+    }), EditorView.editable.of(!readonly), EditorView.contentAttributes.of(contentAttributes)];
+    return EditorState.create({
+      doc,
+      extensions
     });
-    const editable = EditorView.editable.of(!readonly);
-    const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
-    const view = new EditorView({
-      state: createState('', [updateListener, editable, contentAttributesExtension])
-    });
-    view.setValue = function (value) {
-      this.setState(createState(value, [updateListener, editable, contentAttributesExtension]));
-    };
-    view.setVariables = function (variables) {
-      this.setState(createState(view.state.doc.toString(), [updateListener, editable, contentAttributesExtension], variables));
-    };
-    return view;
   }
-  const view = this._view = createView(readonly);
-  this.setValue = function (value) {
-    view.setValue(value);
+  const view = new EditorView({
+    state: createState('')
+  });
+  this.setValue = function (newValue) {
+    const oldValue = view.state.doc.toString();
+    const diff = findDiff(oldValue, newValue);
+    if (diff) {
+      view.dispatch({
+        changes: {
+          from: diff.start,
+          to: diff.end,
+          insert: diff.text
+        },
+        selection: {
+          anchor: diff.start + diff.text.length
+        }
+      });
+    }
   };
   this.getValue = function () {
     return view.state.doc.toString();
   };
-
-  /**
-   * @param {Variables} variables
-   */
   this.setVariables = function (variables) {
-    view.setVariables(variables);
+    view.dispatch({
+      effects: autocompletionConfCompartment.reconfigure(variablesFacet.of(variables))
+    });
+  };
+  this.getView = function () {
+    return view;
   };
   this.on = emitter.on;
   this.off = emitter.off;
@@ -228,24 +214,56 @@ function JSONEditor(options = {}) {
   this.attachTo = function (_container) {
     container = _container;
     container.appendChild(view.dom);
+    classes(container, document.body).add('fjs-json-editor');
   };
   this.destroy = function () {
-    if (view.dom.parentNode) {
-      view.dom.parentNode.removeChild(view.dom);
+    if (container && view.dom) {
+      container.removeChild(view.dom);
+      classes(container, document.body).remove('fjs-json-editor');
     }
     view.destroy();
   };
+  function createPlaceholderLinterExtension() {
+    return linter(view => {
+      const placeholders = view.dom.querySelectorAll('.cm-placeholder');
+      if (placeholders.length > 0) {
+        classes(container, document.body).add(NO_LINT_CLS);
+      } else {
+        classes(container, document.body).remove(NO_LINT_CLS);
+      }
+      return [];
+    });
+  }
 }
-
-// helpers //////////////////////
-
-function set(node, cls) {
-  const classes$1 = classes(node, document.body);
-  classes$1.add(cls);
-}
-function unset(node, cls) {
-  const classes$1 = classes(node, document.body);
-  classes$1.remove(cls);
+function findDiff(oldStr, newStr) {
+  if (oldStr === newStr) {
+    return null;
+  }
+  oldStr = oldStr || '';
+  newStr = newStr || '';
+  let minLength = Math.min(oldStr.length, newStr.length);
+  let start = 0;
+  while (start < minLength && oldStr[start] === newStr[start]) {
+    start++;
+  }
+  if (start === minLength) {
+    return {
+      start: start,
+      text: newStr.slice(start),
+      end: oldStr.length
+    };
+  }
+  let endOld = oldStr.length;
+  let endNew = newStr.length;
+  while (endOld > start && endNew > start && oldStr[endOld - 1] === newStr[endNew - 1]) {
+    endOld--;
+    endNew--;
+  }
+  return {
+    start: start,
+    text: newStr.slice(start, endNew),
+    end: endOld
+  };
 }
 
 function Section(props) {
@@ -279,90 +297,69 @@ Section.HeaderItem = function (props) {
   return props.children;
 };
 
-function PlaygroundRoot(props) {
+function PlaygroundRoot(config) {
   const {
-    additionalModules = [],
+    additionalModules,
     // goes into both editor + viewer
-    actions: actionsConfig = {},
+    actions: actionsConfig,
     emit,
-    exporter: exporterConfig = {},
-    viewerProperties = {},
-    editorProperties = {},
-    viewerAdditionalModules = [],
-    editorAdditionalModules = [],
-    propertiesPanel: propertiesPanelConfig = {},
-    onInit: onPlaygroundInit,
-    onStateChanged
-  } = props;
+    exporter: exporterConfig,
+    viewerProperties,
+    editorProperties,
+    viewerAdditionalModules,
+    editorAdditionalModules,
+    propertiesPanel: propertiesPanelConfig,
+    apiLinkTarget
+  } = config;
   const {
     display: displayActions = true
-  } = actionsConfig;
-  const paletteContainerRef = useRef();
+  } = actionsConfig || {};
   const editorContainerRef = useRef();
-  const formContainerRef = useRef();
-  const dataContainerRef = useRef();
-  const resultContainerRef = useRef();
+  const paletteContainerRef = useRef();
   const propertiesPanelContainerRef = useRef();
-  const paletteRef = useRef();
+  const viewerContainerRef = useRef();
+  const inputDataContainerRef = useRef();
+  const outputDataContainerRef = useRef();
   const formEditorRef = useRef();
-  const formRef = useRef();
-  const dataEditorRef = useRef();
-  const resultViewRef = useRef();
-  const propertiesPanelRef = useRef();
+  const formViewerRef = useRef();
+  const inputDataRef = useRef();
+  const outputDataRef = useRef();
   const [showEmbed, setShowEmbed] = useState(false);
-  const [initialData] = useState(props.data || undefined);
-  const [initialSchema, setInitialSchema] = useState(props.schema);
-  const [data, setData] = useState(props.data || {});
-  const [schema, setSchema] = useState(props.schema);
-  const [resultData, setResultData] = useState({});
+  const [schema, setSchema] = useState();
+  const [data, setData] = useState();
+  const load = useCallback((schema, data) => {
+    formEditorRef.current.importSchema(schema, data);
+    inputDataRef.current.setValue(toString(data));
+    setSchema(schema);
+    setData(data);
+  }, []);
 
-  // pipe to playground API
+  // initialize and link the editors
   useEffect(() => {
-    onPlaygroundInit({
-      attachDataContainer: node => dataEditorRef.current.attachTo(node),
-      attachEditorContainer: node => formEditorRef.current.attachTo(node),
-      attachFormContainer: node => formRef.current.attachTo(node),
-      attachPaletteContainer: node => paletteRef.current.attachTo(node),
-      attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
-      attachResultContainer: node => resultViewRef.current.attachTo(node),
-      get: (name, strict) => formEditorRef.current.get(name, strict),
-      getDataEditor: () => dataEditorRef.current,
-      getEditor: () => formEditorRef.current,
-      getForm: () => formRef.current,
-      getResultView: () => resultViewRef.current,
-      getSchema: () => formEditorRef.current.getSchema(),
-      setSchema: setInitialSchema,
-      saveSchema: () => formEditorRef.current.saveSchema()
-    });
-  }, [onPlaygroundInit]);
-  useEffect(() => {
-    setInitialSchema(props.schema || {});
-  }, [props.schema]);
-  useEffect(() => {
-    const dataEditor = dataEditorRef.current = new JSONEditor({
-      value: toString(data),
+    const inputDataEditor = inputDataRef.current = new JSONEditor({
       contentAttributes: {
         'aria-label': 'Form Input',
         tabIndex: 0
       },
       placeholder: createDataEditorPlaceholder()
     });
-    const resultView = resultViewRef.current = new JSONEditor({
+    const outputDataEditor = outputDataRef.current = new JSONEditor({
       readonly: true,
-      value: toString(resultData),
       contentAttributes: {
         'aria-label': 'Form Output',
         tabIndex: 0
       }
     });
-    const form = formRef.current = new Form({
-      additionalModules: [...additionalModules, ...viewerAdditionalModules],
+    const formViewer = formViewerRef.current = new Form({
+      container: viewerContainerRef.current,
+      additionalModules: [...(additionalModules || []), ...(viewerAdditionalModules || [])],
       properties: {
-        ...viewerProperties,
+        ...(viewerProperties || {}),
         'ariaLabel': 'Form Preview'
       }
     });
     const formEditor = formEditorRef.current = new FormEditor({
+      container: editorContainerRef.current,
       renderer: {
         compact: true
       },
@@ -371,17 +368,15 @@ function PlaygroundRoot(props) {
       },
       propertiesPanel: {
         parent: propertiesPanelContainerRef.current,
-        ...propertiesPanelConfig
+        ...(propertiesPanelConfig || {})
       },
       exporter: exporterConfig,
       properties: {
-        ...editorProperties,
+        ...(editorProperties || {}),
         'ariaLabel': 'Form Definition'
       },
-      additionalModules: [...additionalModules, ...editorAdditionalModules]
+      additionalModules: [...(additionalModules || []), ...(editorAdditionalModules || [])]
     });
-    paletteRef.current = formEditor.get('palette');
-    propertiesPanelRef.current = formEditor.get('propertiesPanel');
     formEditor.on('formField.add', ({
       formField
     }) => {
@@ -407,7 +402,7 @@ function PlaygroundRoot(props) {
           ...currentData,
           [id]: initialDemoData
         };
-        dataEditorRef.current.setValue(toString(newData));
+        inputDataRef.current.setValue(toString(newData));
         return newData;
       });
     });
@@ -418,10 +413,13 @@ function PlaygroundRoot(props) {
       // notify interested parties after render
       emit('formPlayground.rendered');
     });
-    form.on('changed', () => {
-      setResultData(form._getSubmitData());
+
+    // pipe viewer changes to output data editor
+    formViewer.on('changed', () => {
+      const submitData = formViewer._getSubmitData();
+      outputDataEditor.setValue(toString(submitData));
     });
-    dataEditor.on('changed', event => {
+    inputDataEditor.on('changed', event => {
       try {
         setData(JSON.parse(event.value));
       } catch (error) {
@@ -429,48 +427,68 @@ function PlaygroundRoot(props) {
         emit('formPlayground.inputDataError', error);
       }
     });
-    const formContainer = formContainerRef.current;
-    const editorContainer = editorContainerRef.current;
-    const dataContainer = dataContainerRef.current;
-    const resultContainer = resultContainerRef.current;
-    dataEditor.attachTo(dataContainer);
-    resultView.attachTo(resultContainer);
-    form.attachTo(formContainer);
-    formEditor.attachTo(editorContainer);
+    inputDataEditor.attachTo(inputDataContainerRef.current);
+    outputDataEditor.attachTo(outputDataContainerRef.current);
     return () => {
-      dataEditor.destroy();
-      resultView.destroy();
-      form.destroy();
+      inputDataEditor.destroy();
+      outputDataEditor.destroy();
+      formViewer.destroy();
       formEditor.destroy();
     };
-  }, []);
-  useEffect(() => {
-    dataEditorRef.current.setValue(toString(initialData));
-  }, [initialData]);
+  }, [additionalModules, editorAdditionalModules, editorProperties, emit, exporterConfig, propertiesPanelConfig, viewerAdditionalModules, viewerProperties]);
+
+  // initialize data through props
   useEffect(() => {
-    if (initialSchema) {
-      formEditorRef.current.importSchema(initialSchema);
-      dataEditorRef.current.setVariables(getSchemaVariables(initialSchema));
+    if (!config.initialSchema) {
+      return;
     }
-  }, [initialSchema]);
+    load(config.initialSchema, config.initialData || {});
+  }, [config.initialSchema, config.initialData, load]);
+  useEffect(() => {
+    schema && formViewerRef.current.importSchema(schema, data);
+  }, [schema, data]);
   useEffect(() => {
-    if (schema && dataContainerRef.current) {
+    if (schema && inputDataContainerRef.current) {
       const variables = getSchemaVariables(schema);
-      dataEditorRef.current.setVariables(variables);
+      inputDataRef.current.setVariables(variables);
     }
   }, [schema]);
+
+  // exposes api to parent
   useEffect(() => {
-    schema && formRef.current.importSchema(schema, data);
-  }, [schema, data]);
-  useEffect(() => {
-    resultViewRef.current.setValue(toString(resultData));
-  }, [resultData]);
+    if (!apiLinkTarget) {
+      return;
+    }
+    apiLinkTarget.api = {
+      attachDataContainer: node => inputDataRef.current.attachTo(node),
+      attachResultContainer: node => outputDataRef.current.attachTo(node),
+      attachFormContainer: node => formViewerRef.current.attachTo(node),
+      attachEditorContainer: node => formEditorRef.current.attachTo(node),
+      attachPaletteContainer: node => formEditorRef.current.get('palette').attachTo(node),
+      attachPropertiesPanelContainer: node => formEditorRef.current.get('propertiesPanel').attachTo(node),
+      get: (name, strict) => formEditorRef.current.get(name, strict),
+      getDataEditor: () => inputDataRef.current,
+      getEditor: () => formEditorRef.current,
+      getForm: () => formViewerRef.current,
+      getResultView: () => outputDataRef.current,
+      getSchema: () => formEditorRef.current.getSchema(),
+      saveSchema: () => formEditorRef.current.saveSchema(),
+      setSchema: setSchema,
+      setData: setData
+    };
+  }, [apiLinkTarget]);
+
+  // separate effect for state to avoid re-creating the api object every time
   useEffect(() => {
-    onStateChanged && onStateChanged({
+    if (!apiLinkTarget) {
+      return;
+    }
+    apiLinkTarget.api.getState = () => ({
       schema,
       data
     });
-  }, [onStateChanged, schema, data]);
+    apiLinkTarget.api.load = load;
+  }, [apiLinkTarget, schema, data, load]);
   const handleDownload = useCallback(() => {
     download(JSON.stringify(schema, null, '  '), 'form.json', 'text/json');
   }, [schema]);
@@ -518,19 +536,19 @@ function PlaygroundRoot(props) {
       }), jsx(Section, {
         name: "Form Preview",
         children: jsx("div", {
-          ref: formContainerRef,
+          ref: viewerContainerRef,
           class: "fjs-pgl-form-container"
         })
       }), jsx(Section, {
         name: "Form Input",
         children: jsx("div", {
-          ref: dataContainerRef,
+          ref: inputDataContainerRef,
           class: "fjs-pgl-text-container"
         })
       }), jsx(Section, {
         name: "Form Output",
         children: jsx("div", {
-          ref: resultContainerRef,
+          ref: outputDataContainerRef,
           class: "fjs-pgl-text-container"
         })
       })]
@@ -555,16 +573,11 @@ function createDataEditorPlaceholder() {
 function Playground(options) {
   const {
     container: parent,
-    schema,
-    data,
+    schema: initialSchema,
+    data: initialData,
     ...rest
   } = options;
   const emitter = mitt();
-  let state = {
-    data,
-    schema
-  };
-  let ref;
   const container = document.createElement('div');
   container.classList.add('fjs-pgl-parent');
   if (parent) {
@@ -574,63 +587,52 @@ function Playground(options) {
     const file = files[0];
     if (file) {
       try {
-        ref.setSchema(JSON.parse(file.contents));
+        this.api.setSchema(JSON.parse(file.contents));
       } catch (err) {
 
         // TODO(nikku): indicate JSON parse error
       }
     }
   });
-  const withRef = function (fn) {
+  const safe = function (fn) {
     return function (...args) {
-      if (!ref) {
+      if (!this.api) {
         throw new Error('Playground is not initialized.');
       }
       return fn(...args);
     };
   };
-  const onInit = function (_ref) {
-    ref = _ref;
-    emitter.emit('formPlayground.init');
-  };
   container.addEventListener('dragover', handleDrop);
   render(jsx(PlaygroundRoot, {
-    data: data,
+    initialSchema: initialSchema,
+    initialData: initialData,
     emit: emitter.emit,
-    onInit: onInit,
-    onStateChanged: _state => state = _state,
-    schema: schema,
+    apiLinkTarget: this,
     ...rest
   }), container);
   this.on = emitter.on;
   this.off = emitter.off;
   this.emit = emitter.emit;
-  this.on('destroy', function () {
+  this.on('destroy', () => {
     render(null, container);
-  });
-  this.on('destroy', function () {
     parent.removeChild(container);
   });
-  this.getState = function () {
-    return state;
-  };
-  this.getSchema = withRef(() => ref.getSchema());
-  this.setSchema = withRef(schema => ref.setSchema(schema));
-  this.saveSchema = withRef(() => ref.saveSchema());
-  this.get = withRef((name, strict) => ref.get(name, strict));
-  this.getDataEditor = withRef(() => ref.getDataEditor());
-  this.getEditor = withRef(() => ref.getEditor());
-  this.getForm = withRef((name, strict) => ref.getForm(name, strict));
-  this.getResultView = withRef(() => ref.getResultView());
-  this.destroy = function () {
-    this.emit('destroy');
-  };
-  this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
-  this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
-  this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
-  this.attachResultContainer = withRef(node => ref.attachResultContainer(node));
-  this.attachPaletteContainer = withRef(node => ref.attachPaletteContainer(node));
-  this.attachPropertiesPanelContainer = withRef(node => ref.attachPropertiesPanelContainer(node));
+  this.destroy = () => this.emit('destroy');
+  this.getState = safe(() => this.api.getState());
+  this.getSchema = safe(() => this.api.getSchema());
+  this.setSchema = safe(schema => this.api.setSchema(schema));
+  this.saveSchema = safe(() => this.api.saveSchema());
+  this.get = safe((name, strict) => this.api.get(name, strict));
+  this.getDataEditor = safe(() => this.api.getDataEditor());
+  this.getEditor = safe(() => this.api.getEditor());
+  this.getForm = safe((name, strict) => this.api.getForm(name, strict));
+  this.getResultView = safe(() => this.api.getResultView());
+  this.attachEditorContainer = safe(node => this.api.attachEditorContainer(node));
+  this.attachPreviewContainer = safe(node => this.api.attachFormContainer(node));
+  this.attachDataContainer = safe(node => this.api.attachDataContainer(node));
+  this.attachResultContainer = safe(node => this.api.attachResultContainer(node));
+  this.attachPaletteContainer = safe(node => this.api.attachPaletteContainer(node));
+  this.attachPropertiesPanelContainer = safe(node => this.api.attachPropertiesPanelContainer(node));
 }
 
 export { Playground };