How to use the slate.Inline.create function in slate

To help you get started, we’ve selected a few slate 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 FabricLabs / fabric / src / components / views / rooms / MessageComposerInput.js View on Github external
for (const node of editorState.document.getTexts()) {
                if (node.text !== '' && HtmlUtils.containsEmoji(node.text)) {
                    let match;
                    EMOJI_REGEX.lastIndex = 0;
                    while ((match = EMOJI_REGEX.exec(node.text)) !== null) {
                        const range = Range.create({
                            anchor: {
                                key: node.key,
                                offset: match.index,
                            },
                            focus: {
                                key: node.key,
                                offset: match.index + match[0].length,
                            },
                        });
                        const inline = Inline.create({
                            type: 'emoji',
                            data: { emojiUnicode: match[0] },
                        });
                        change = change.insertInlineAtRange(range, inline);
                        editorState = change.value;

                        // if we replaced an emoji, start again looking for more
                        // emoji in the new editor state since doing the replacement
                        // will change the node structure & offsets so we can't compute
                        // insertion ranges from node.key / match.index anymore.
                        foundEmoji = true;
                        break;
                    }
                }
            }
        } while (foundEmoji);
github sanity-io / sanity / packages / @sanity / form-builder / src / inputs / BlockEditor / plugins / InsertInlineObjectPlugin.ts View on Github external
if (command.type !== 'insertInlineObject') {
        return next()
      }
      const options = command.args[0] || {}
      const {objectType} = options
      const key = options.key || randomKey(12)
      const inlineProps = {
        key,
        type: objectType.name,
        isVoid: true,
        data: {
          _key: key,
          value: {_type: objectType.name, _key: key}
        }
      }
      const inline = Inline.create(inlineProps)
      editor.insertInline(inline)

      // Normalize the keys in the block nodes to match what is sent to gradient
      const inlinePath = editor.value.selection.focus.path
      const block = editor.value.focusBlock
      editor.replaceNodeByKey(block.key, normalizeBlock(block))
      editor.moveTo(inlinePath, 0)
      return editor
    }
  }
github sanity-io / sanity / packages / @sanity / form-builder / src / inputs / BlockEditor / nodes / InlineObject.tsx View on Github external
const {node, editor} = this.props
    const target = this._dropTarget
    // Return if this is our node
    if (!target || target.node === node) {
      this.resetDropTarget()
      return
    }
    editor.select(target.selection).removeNodeByKey(node.key)
    const {focusBlock, focusText} = editor.value
    // Create a new key for the "new" object
    let newNode = node.toJSON({preserveKeys: true, perserveData: true})
    const newKey = `${focusBlock.key}${focusBlock.nodes.indexOf(focusText) + 1}`
    newNode.data.value._key = newKey
    newNode.data._key = newKey
    newNode.key = newKey
    newNode = Inline.create(newNode)
    editor.insertInline(newNode)
    this.resetDropTarget()
  }
  handleInvalidValue = (event: PatchEvent) => {
github orbiting / publikator-frontend / components / Editor / plugins / link / ui.js View on Github external
editor.change(change => {
              return change.replaceNodeByKey(
                node.key,
                Inline.create({
                  type: 'link',
                  data: node.data.merge({
                    title: `${user.firstName} ${user.lastName}`,
                    href: `/~${user.id}`
                  }),
                  nodes: [
                    Text.create(`${user.firstName} ${user.lastName}`)
                  ]
                })
              )
            })
            onClose()
github olymp / olymp / packages / slate / add-block.es6 View on Github external
const createBlock = (block) => {
  let { type } = block;
  const { isVoid, key, kind, data } = block;
  if (!type) {
    type = key;
  }
  if (kind === 'inline' || (!kind && isVoid)) {
    return Inline.create({
      type,
      isVoid,
      kind,
      data: data || {},
    });
  }
  return Block.create({
    type,
    isVoid,
    kind,
    data: data || {},
  });
};
export default addBlock;
github Simon-Initiative / authoring-client / src / actions / inputRef.ts View on Github external
function insertInline(editor: Editor, wrapper: InputRef) {
  const inline = Inline.create({ data: { value: wrapper }, type: wrapper.contentType });
  return editor.insertInline(inline);
}
github FabricLabs / fabric / src / components / views / rooms / MessageComposerInput.js View on Github external
this.setState({editorState});
            }
            return false;
        }

        const {
            range = null,
            completion = '',
            completionId = '',
            href = null,
            suffix = '',
        } = displayedCompletion;

        let inline;
        if (href) {
            inline = Inline.create({
                type: 'pill',
                data: { completion, completionId, href },
            });
        } else if (completion === '@room') {
            inline = Inline.create({
                type: 'pill',
                data: { completion, completionId },
            });
        }

        let editorState = activeEditorState;

        if (range) {
            const change = editorState.change()
                                      .moveToAnchor()
                                      .moveAnchorTo(range.start)
github haiwen / seahub / frontend / src / lib / rich-markdown-editor.js View on Github external
onSetLink = url => {
    const value = this.props.value;
    const change = value.change();
    if (value.isExpanded) {
      change.call((change, href) => {
        change.wrapInline({
          type: 'link',
          data: { href }
        });
        change.collapseToEnd();
      }, url);
    } else {
      const inlineText = Inline.create({
        data: { href: url },
        type: 'link',
        nodes: [Text.create({text:url})]
      });
      change.insertInline(inlineText);
      change.collapseToEnd();
    }
    this.onChange(change);
  }
github Foundry376 / Mailspring / app / src / components / composer-editor / template-plugins.jsx View on Github external
change: (editor, e, matches) => {
      const name = matches.before[2];
      const node = Inline.create({
        type: VARIABLE_TYPE,
        data: { name },
      });
      editor.insertInlineAtRange(editor.value.selection, node).moveToEnd();
    },
  }),