How to use the @ephox/sugar.Css.getRaw 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 / plugins / table / main / ts / ui / Helpers.ts View on Github external
const getBorder = (dom, elm) => {
    // Cases (in order to check):
    // 1. shouldStyleWithCss - extract border-width style if it exists
    // 2. !shouldStyleWithCss && border attribute - set border attribute as value
    // 3. !shouldStyleWithCss && nothing on the table - grab styles from the first th or td

    const optBorderWidth = Css.getRaw(Element.fromDom(elm), 'border-width');
    if (shouldStyleWithCss(editor) && optBorderWidth.isSome()) {
      return optBorderWidth.getOr('');
    }
    return dom.getAttrib(elm, 'border') || Styles.getTDTHOverallStyle(editor.dom, elm, 'border-width')
      || Styles.getTDTHOverallStyle(editor.dom, elm, 'border');
  };
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / dialog / ColorInput.ts View on Github external
validate: (input) => {
            const inputValue = Representing.getValue(input);
            // Consider empty strings valid colours
            if (inputValue.length === 0) {
              return Future.pure(Result.value(true));
            } else {
              const span = Element.fromTag('span');
              Css.set(span, 'background-color', inputValue);

              const res = Css.getRaw(span, 'background-color').fold(
                // TODO: Work out what we want to do here.
                () => Result.error('blah'),
                (_) => Result.value(inputValue)
              );

              return Future.pure(res);
            }
          }
        }
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
getTabview(dialog).each((tabview) => {
          const oldFocus = Focus.active();
          Css.set(tabview, 'visibility', 'hidden');
          const oldHeight = Css.getRaw(tabview, 'height').map((h) => parseInt(h, 10));
          Css.remove(tabview, 'height');
          Css.remove(tabview, 'flex-basis');
          const newHeight = tabview.dom().getBoundingClientRect().height;
          const hasGrown = oldHeight.forall((h) => newHeight > h);

          if (hasGrown) {
            maxTabHeight.set(Option.from(newHeight));
            updateTabviewHeight(dialog, tabview, maxTabHeight);
          } else {
            oldHeight.each((h) => {
              setTabviewHeight(tabview, h);
            });
          }

          Css.remove(tabview, 'visibility');
          oldFocus.each(Focus.focus);
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / ui / Helpers.ts View on Github external
const extractAdvancedStyles = (dom, elm) => {
  const rgbToHex = (value: string) => Strings.startsWith(value, 'rgb') ? dom.toHex(value) : value;

  const borderStyle = Css.getRaw(Element.fromDom(elm), 'border-style').getOr('');
  const borderColor = Css.getRaw(Element.fromDom(elm), 'border-color').map(rgbToHex).getOr('');
  const bgColor = Css.getRaw(Element.fromDom(elm), 'background-color').map(rgbToHex).getOr('');

  return {
    borderstyle: borderStyle,
    bordercolor: borderColor,
    backgroundcolor: bgColor
  };
};
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ui / SerialisedDialog.ts View on Github external
SelectorFind.descendant(dialog.element(), '.' + Styles.resolve('serialised-dialog-chain')).each(function (parent) {
      if ((spec.state.currentScreen.get() + direction) >= 0 && (spec.state.currentScreen.get() + direction) < screens.length) {
        Css.getRaw(parent, 'left').each(function (left) {
          const currentLeft = parseInt(left, 10);
          const w = Width.get(screens[0]);
          Css.set(parent, 'left', (currentLeft - (direction * w)) + 'px');
        });
        spec.state.currentScreen.set(spec.state.currentScreen.get() + direction);
      }
    });
  };
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / ui / Helpers.ts View on Github external
const extractAdvancedStyles = (dom, elm) => {
  const rgbToHex = (value: string) => Strings.startsWith(value, 'rgb') ? dom.toHex(value) : value;

  const borderStyle = Css.getRaw(Element.fromDom(elm), 'border-style').getOr('');
  const borderColor = Css.getRaw(Element.fromDom(elm), 'border-color').map(rgbToHex).getOr('');
  const bgColor = Css.getRaw(Element.fromDom(elm), 'background-color').map(rgbToHex).getOr('');

  return {
    borderstyle: borderStyle,
    bordercolor: borderColor,
    backgroundcolor: bgColor
  };
};
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / ui / Helpers.ts View on Github external
const extractAdvancedStyles = (dom, elm) => {
  const rgbToHex = (value: string) => Strings.startsWith(value, 'rgb') ? dom.toHex(value) : value;

  const borderStyle = Css.getRaw(Element.fromDom(elm), 'border-style').getOr('');
  const borderColor = Css.getRaw(Element.fromDom(elm), 'border-color').map(rgbToHex).getOr('');
  const bgColor = Css.getRaw(Element.fromDom(elm), 'background-color').map(rgbToHex).getOr('');

  return {
    borderstyle: borderStyle,
    bordercolor: borderColor,
    backgroundcolor: bgColor
  };
};
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / util / FontSizes.ts View on Github external
    const inline = PredicateFind.closest(start, (elem) => Css.getRaw(elem, 'font-size').isSome(), isRoot)
      .bind((elem) => Css.getRaw(elem, 'font-size'));
github tinymce / tinymce / modules / tinymce / src / core / main / ts / commands / IndentOutdent.ts View on Github external
return Arr.forall(blocks, (block) => {
    const indentStyleName = getIndentStyleName(Settings.shouldIndentUseMargin(editor), block);
    const intentValue = Css.getRaw(block, indentStyleName).map(parseIndentValue).getOr(0);
    const contentEditable = editor.dom.getContentEditable(block.dom());
    return contentEditable !== 'false' && intentValue > 0;
  });
};