How to use the @ephox/sugar.Body.body function in @ephox/sugar

To help you get started, we’ve selected a few @ephox/sugar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / dialog / WindowManager.ts View on Github external
// Can't just fireDismissalEvent formCloseEvent, because it is on the parent component of the dialog
            AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
              AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
            }),
          ]),
          ...inlineAdditionalBehaviours(editor, isStickyToolbar)
        ])
      }));
      inlineDialog.set(inlineDialogComp);

      // Position the inline dialog
      InlineView.showWithin(
        inlineDialogComp,
        anchor,
        GuiFactory.premade(dialogUi.dialog),
        Option.some(Body.body())
      );

      // Refresh the docking position if not using a sticky toolbar
      if (!isStickyToolbar) {
        Docking.refresh(inlineDialogComp);

        // Bind to the editor resize event and update docking as needed. We don't need to worry about
        // 'ResizeWindow` as that's handled by docking already.
        editor.on('ResizeEditor', refreshDocking);
      }

      // Set the initial data in the dialog and focus the first focusable item
      dialogUi.instanceApi.setData(initialData);
      Keying.focusIn(dialogUi.dialog);

      return dialogUi.instanceApi;
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / api / Settings.ts View on Github external
const fixedContainerElement = (editor): Option<element> =&gt; {
  const selector = fixedContainerSelector(editor);
  // If we have a valid selector and are in inline mode, try to get the fixed_toolbar_container
  return selector.length &gt; 0 &amp;&amp; editor.inline ? SelectorFind.descendant(Body.body(), selector) : Option.none();
};
</element>
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / modes / Inline.ts View on Github external
const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
      // No max width, so use the body width, minus the left pos as the maximum
      const bodyMargin = Utils.parseToInt(Css.get(Body.body(), 'margin-left')).getOr(0);
      return Width.get(Body.body()) - location.left() + bodyMargin;
    });
    Css.set(floatContainer.element(), 'max-width', maxWidth + 'px');
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ios / core / IosSetup.ts View on Github external
const setup = function (bag) {
  const cWin = bag.cWin();
  const ceBody = bag.ceBody();
  const socket = bag.socket();
  const toolstrip = bag.toolstrip();
  const toolbar = bag.toolbar();
  const contentElement = bag.contentElement();
  const keyboardType = bag.keyboardType();
  const outerWindow = bag.outerWindow();
  const dropup = bag.dropup();

  const structure = IosViewport.takeover(socket, ceBody, toolstrip, dropup);
  const keyboardModel = keyboardType(bag.outerBody(), cWin, Body.body(), contentElement, toolstrip, toolbar);

  const toEditing = function () {
    // Consider inlining, though it will make it harder to follow the API
    keyboardModel.toEditing();
    clearSelection();
  };

  const toReading = function () {
    keyboardModel.toReading();
  };

  const onToolbarTouch = function (event) {
    keyboardModel.onToolbarTouch(event);
  };

  const onOrientation = Orientation.onChange(outerWindow, {
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ios / core / IosSetup.ts View on Github external
const destroy = function () {
    structure.restore();
    onOrientation.destroy();
    onScroll.unbind();
    onResize.unbind();
    keyboardModel.destroy();

    unfocusedSelection.destroy();

    // Try and dismiss the keyboard on close, as they have no input focus.
    CaptureBin.input(Body.body(), Focus.blur);
  };
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / modes / Inline.ts View on Github external
const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
      // No max width, so use the body width, minus the left pos as the maximum
      const bodyMargin = Utils.parseToInt(Css.get(Body.body(), 'margin-left')).getOr(0);
      return Width.get(Body.body()) - location.left() + bodyMargin;
    });
    Css.set(floatContainer.element(), 'max-width', maxWidth + 'px');
github tinymce / tinymce / modules / mcagar / src / main / ts / ephox / mcagar / api / RemoteTinyLoader.ts View on Github external
const script = Element.fromTag('script');

    Attr.set(script, 'referrerpolicy', 'origin');

    Attr.set(script, 'src', url);
    const onLoad = DomEvent.bind(script, 'load', () => {
      onLoad.unbind();
      onError.unbind();
      resolve(Result.value(url));
    });
    const onError = DomEvent.bind(script, 'error', () => {
      onLoad.unbind();
      onError.unbind();
      resolve(Result.error(new Error('Failed to load script: ' + url)));
    });
    Insert.append(Body.body(), script);
  });
};
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / modes / Iframe.ts View on Github external
const render = (editor: Editor, uiComponents: RenderUiComponents, rawUiConfig: RenderUiConfig, backstage: UiFactoryBackstage, args: RenderArgs): ModeRenderInfo => {
  const lastToolbarWidth = Cell(0);

  loadIframeSkin(editor);

  Attachment.attachSystemAfter(Element.fromDom(args.targetNode), uiComponents.mothership);
  Attachment.attachSystem(Body.body(), uiComponents.uiMothership);

  editor.on('init', () => {
    setToolbar(editor, uiComponents, rawUiConfig, backstage);
    lastToolbarWidth.set(editor.getWin().innerWidth);

    OuterContainer.setMenubar(
      uiComponents.outerContainer,
      identifyMenus(editor, rawUiConfig)
    );

    OuterContainer.setSidebar(
      uiComponents.outerContainer,
      rawUiConfig.sidebar
    );

    setupEvents(editor);
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / api / Settings.ts View on Github external
const getUiContainer = (editor): Element => {
  const fixedContainer = fixedContainerElement(editor);
  return fixedContainer.getOr(Body.body());
};