TypeScript sugar.WindowSelection類代碼示例

 return function () {
   return WindowSelection.get(win).bind(function (sel) {
     return WindowSelection.getFirstRect(win, sel).orThunk(function () {
       return tryFallbackBox(win);
     });
   });
 };

    return Chain.op(function () {
      const sc = Hierarchy.follow(Element.fromDom(viewBlock.get()), startPath).getOrDie('invalid startPath');
      const fc = Hierarchy.follow(Element.fromDom(viewBlock.get()), finishPath).getOrDie('invalid finishPath');
      const win = Traverse.defaultView(sc);

      WindowSelection.setExact(
        win.dom(), sc, soffset, fc, foffset
      );
    });

const setSelectionAtTouch = function (editorApi, touchEvent) {
  // shortTextFix, when text is short body height is short too, tapping at the bottom of the editor
  // should set a selection. We don't set body height to 100% because of side effects, so we resort
  // to a mousedown on the iDoc, it is a clean place, and very specific to this issue. On a vanilla
  // CE, with body height 100%, event sequence: touchstart, touchend, mousemove, mousedown, FOCUS,
  // mouseup, click. This is why we fire focus on mousedown, to match the natural sequence.
  Focus.focus(editorApi.body());

  // then set the selection to the end, last cursor position
  // Note: the reason why there is a flicker when we touch the bottom, is because of the native scroll
  // cursor into view, in this case it wants to scroll down so the text is centered on the screen,
  // we have to live with this until we control selection
  const touch = touchEvent.raw().changedTouches[0];
  WindowSelection.getAtPoint(editorApi.win(), touch.pageX, touch.pageY).each(function (raw) {
    editorApi.setSelection(raw.start(), raw.soffset(), raw.finish(), raw.foffset());
  });
};

    return Step.stateful(function (value, next, die) {
      const pageBody = iframe.dom().contentWindow.document.body;
      const editorBody = pageBody.querySelector('iframe').contentWindow.document.body;
      const target = Option.from(editorBody.querySelectorAll(selector)[index]).map(Element.fromDom).getOrDie('no index ' + index + ' for selector: ' + selector);
      WindowSelection.setExact(editorBody.ownerDocument.defaultView, target, 0, target, 0);
      const socket = pageBody.querySelector('.tinymce-mobile-editor-socket');
      socket.scrollTop = target.dom().getBoundingClientRect().top - 100 - keyboardHeight;
      pageBody.style.setProperty('margin-bottom', '2000px');
      pageBody.ownerDocument.defaultView.scrollTo(0, keyboardHeight);

      //
      const cursorY = getCursorY(target);
      const newValue = Merger.deepMerge(
        value,
        {
          target,
          cursorY
        }
      );
      console.log('newValue', newValue);
      next(newValue);
    });

const getCellFirstCursorPosition = function (editor, cell) {
  const selection = Selection.exact(cell, 0, cell, 0);
  return WindowSelection.toNative(selection);
};

 return Traverse.parent(start).bind(function (parent) {
   const selection = Selection.exact(start, range.startOffset, parent, Awareness.getEnd(parent));
   const optRect = WindowSelection.getFirstRect(range.startContainer.ownerDocument.defaultView, selection);
   return optRect.map(collapsedRect).map(Arr.pure);
 }).getOr([ ]);

export default function () {
  const frame = Element.fromTag('iframe');
  Attr.set(frame, 'src', '/project/tinymce/src/themes/mobile/test/html/editor.html');

  const sWaitForEditorLoaded = Waiter.sTryUntil(
    'Waiting for iframe to load',
    Step.sync(() => {
      Assertions.assertEq('Check for a content editable body', 'true', frame.dom().contentWindow.document.body.contentEditable);
    }),
    100,
    8000
  );

  const config = {
    getFrame () {
      return frame;
    },
    onDomChanged () {
      return { unbind: Fun.noop };
    }
  };

  const delegate = TestEditor();
  const dEditor = delegate.editor();

  const editor = {
    selection: {
      getStart () {
        return WindowSelection.getExact(frame.dom().contentWindow).map(function (sel) {
          return sel.start().dom();
        }).getOr(null);
      },
      getContent () {
        return frame.dom().contentWindow.document.body.innerHTML;
      },
      select: Fun.noop
    },

    getBody () {
      return frame.dom().contentWindow.document.body;
    },

    insertContent: dEditor.insertContent,
    execCommand: dEditor.execCommand,
    dom: dEditor.dom,
    // Maybe this should be implemented
    focus () {
      Focus.focus(frame);
      const win = frame.dom().contentWindow;
      WindowSelection.getExact(win).orThunk(function () {
        const fbody = Element.fromDom(frame.dom().contentWindow.document.body);
        const elem = Cursors.calculateOne(fbody, [ 0 ]);
        WindowSelection.setExact(win, elem, 0, elem, 0);
        return Option.none();
      });
    },
    ui: {
      registry: {
        getAll: () => {
          return {
            icons: {}
          };
        }
      }
    }
  };

  const component = GuiFactory.build(
    GuiFactory.external({
      element: frame
    })
  );

  return {
    component: Fun.constant(component) as () => AlloyComponent,
    config: Fun.constant(config),
    editor: Fun.constant(editor),
    adder: delegate.adder,
    assertEq: delegate.assertEq,
    sAssertEq: delegate.sAssertEq,
    sWaitForEditorLoaded,
    sClear: delegate.sClear,
    sPrepareState: delegate.sPrepareState
  };
}