OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertDialog.ts	1.7 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Autocomplete.ts	1.78 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Bar.ts	689 bytes	02/20/2020 06:38:16 AM	rw-r--r--
📄 BodyPanel.ts	2.11 KB	02/20/2020 06:38:16 AM	rw-r--r--
📄 Collection.ts	5.65 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorInput.ts	5.81 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorPicker.ts	4.06 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 ConfirmDialog.ts	2.13 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 CustomEditor.ts	2.04 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dialogs.ts	3.91 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dropzone.ts	4.89 KB	02/20/2020 06:38:21 AM	rw-r--r--
📄 Grid.ts	735 bytes	02/20/2020 06:38:21 AM	rw-r--r--
📄 IFrame.ts	3.3 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 Label.ts	1.29 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 SelectBox.ts	2.37 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 SizeInput.ts	4.96 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 TabPanel.ts	5.41 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 Table.ts	1.52 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 TextField.ts	4.24 KB	02/20/2020 06:38:25 AM	rw-r--r--
📄 TypeAheadInput.ts	1.31 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 UrlInput.ts	9.25 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 WindowManager.ts	6.3 KB	02/20/2020 06:38:27 AM	rw-r--r--
📁 imagetools	-	02/20/2020 06:42:42 AM	rwxr-xr-x

Editing: CustomEditor.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { AddEventsBehaviour, AlloyEvents, Behaviour, Memento, Representing, SimpleSpec } from '@ephox/alloy';
import { Element } from '@ephox/dom-globals';
import { Cell, Option } from '@ephox/katamari';

import { ComposingConfigs } from '../alien/ComposingConfigs';

export interface CustomEditorFoo {
  tag: string;
  init: (e: Element) => Promise<{
    setValue(value: string): void,
    getValue(): string,
    destroy(): void
  }>;
}

export const renderCustomEditor = (spec: CustomEditorFoo): SimpleSpec => {
  const editorApi = Cell(Option.none());

const memReplaced = Memento.record({
    dom: {
      tag: spec.tag
    }
  });

const initialValue = Cell(Option.none());

return {
    dom: {
      tag: 'div',
      classes: [ 'tox-custom-editor' ]
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('editor-foo-events', [
        AlloyEvents.runOnAttached((component) => {
          memReplaced.getOpt(component).each((ta) => {
            spec.init(ta.element().dom()).then((ea) => {
              initialValue.get().each((cvalue) => {
                ea.setValue(cvalue);
              });

initialValue.set(Option.none());
              editorApi.set(Option.some(ea));
            });
          });
        })
      ]),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: () => editorApi.get().fold(
            () => initialValue.get().getOr(''),
            (ed) => ed.getValue()
          ),
          setValue: (component, value) => {
            editorApi.get().fold(
              () => {
                initialValue.set(Option.some(value));
              },
              (ed) => ed.setValue(value)
            );
          }
        }
      }),

ComposingConfigs.self()
    ]),
    components: [memReplaced.asSpec()]
  };
};