Merge pull request #488 from SamyPesse/fix/484

Fix #484: implement wrapInlineByKey and allow wrap of inline void in wrapInline

docs/reference/models/transform.md

@@ -60,6 +60,7 @@ Transform methods can either operate on the [`Document`](./document.md), the [`S
   - [`unwrapInlineByKey`](#unwrapinlinebykey)
   - [`unwrapBlockByKey`](#unwrapblockbykey)
   - [`wrapBlockByKey`](#wrapblockbykey)
+  - [`wrapInlineByKey`](#wrapinlinebykey)
 - [Document Transforms](#document-transforms)
   - [`deleteAtRange`](#deleteatrange)
   - [`deleteBackwardAtRange`](#deletebackwardatrange)
@@ -338,6 +339,12 @@ Unwrap all inner content of a [`Block`](./block.md) node that match `properties`
 
 Wrap the given node in a [`Block`](./block.md) node that match `properties`. For convenience, you can pass a `type` string or `properties` object.
 
+### `wrapInlineByKey`
+`wrapInlineByKey(key: String, properties: Object) => Transform` <br/>
+`wrapInlineByKey(key: String, type: String) => Transform`
+
+Wrap the given node in a [`Inline`](./inline.md) node that match `properties`. For convenience, you can pass a `type` string or `properties` object.
+
 ## Document Transforms
 
 ### `deleteBackwardAtRange`

src/transforms/at-range.js

@@ -987,15 +987,24 @@ export function wrapBlockAtRange(transform, range, block, options = {}) {
  */
 
 export function wrapInlineAtRange(transform, range, inline, options = {}) {
-  if (range.isCollapsed) return
+  let { state } = transform
+  let { document } = state
+  const { normalize = true } = options
+  const { startKey, startOffset, endKey, endOffset } = range
+
+  if (range.isCollapsed) {
+    // Wrapping an inline void
+    const inlineParent = document.getClosestInline(startKey)
+    if (!inlineParent.isVoid) {
+      return
+    }
+
+    return transform.wrapInlineByKey(inlineParent.key, inline, options)
+  }
 
   inline = Normalize.inline(inline)
   inline = inline.merge({ nodes: inline.nodes.clear() })
 
-  const { normalize = true } = options
-  const { startKey, startOffset, endKey, endOffset } = range
-  let { state } = transform
-  let { document } = state
   const blocks = document.getBlocksAtRange(range)
   let startBlock = document.getClosestBlock(startKey)
   let endBlock = document.getClosestBlock(endKey)

src/transforms/by-key.js

@@ -324,6 +324,30 @@ export function unwrapBlockByKey(transform, key, properties, options) {
   transform.unwrapBlockAtRange(range, properties, options)
 }
 
+
+/**
+ * Wrap a node in an inline with `properties`.
+ *
+ * @param {Transform} transform
+ * @param {String} key The node to wrap
+ * @param {Block|Object|String} inline The wrapping inline (its children are discarded)
+ * @param {Object} options
+ *   @property {Boolean} normalize
+ */
+
+export function wrapInlineByKey(transform, key, inline, options) {
+  inline = Normalize.inline(inline)
+  inline = inline.merge({ nodes: inline.nodes.clear() })
+
+  const { document } = transform.state
+  const node = document.assertDescendant(key)
+  const parent = document.getParent(node.key)
+  const index = parent.nodes.indexOf(node)
+
+  transform.insertNodeByKey(parent.key, index, inline, { normalize: false })
+  transform.moveNodeByKey(node.key, inline.key, 0, options)
+}
+
 /**
  * Wrap a node in a block with `properties`.
  *

src/transforms/index.js

@@ -109,6 +109,7 @@ import {
   unwrapInlineByKey,
   unwrapBlockByKey,
   wrapBlockByKey,
+  wrapInlineByKey,
 } from './by-key'
 
 /**
@@ -278,6 +279,7 @@ export default {
   unwrapInlineByKey,
   unwrapBlockByKey,
   wrapBlockByKey,
+  wrapInlineByKey,
 
   /**
    * On selection.

test/transforms/fixtures/at-current-range/wrap-inline/inline-void/index.js

@@ -0,0 +1,29 @@
+
+import assert from 'assert'
+
+export default function (state) {
+  const { document, selection } = state
+  const texts = document.getTexts()
+  const second = texts.get(1)
+  const range = selection.merge({
+    anchorKey: second.key,
+    anchorOffset: 0,
+    focusKey: second.key,
+    focusOffset: 0
+  })
+
+  const next = state
+    .transform()
+    .moveTo(range)
+    .wrapInline({
+      type: 'link'
+    })
+    .apply()
+
+  assert.deepEqual(
+    next.selection.toJS(),
+    range.toJS()
+  )
+
+  return next
+}

test/transforms/fixtures/at-current-range/wrap-inline/inline-void/input.yaml

@@ -0,0 +1,13 @@
+
+nodes:
+  - kind: block
+    type: paragraph
+    nodes:
+      - kind: text
+        text: ""
+      - kind: inline
+        key: image
+        isVoid: true
+        type: image
+      - kind: text
+        text: ""

test/transforms/fixtures/at-current-range/wrap-inline/inline-void/output.yaml

@@ -0,0 +1,15 @@
+
+nodes:
+  - kind: block
+    type: paragraph
+    nodes:
+      - kind: inline
+        type: link
+        nodes:
+          - kind: text
+            text: ""
+          - kind: inline
+            isVoid: true
+            type: image
+          - kind: text
+            text: ""

test/transforms/fixtures/at-range/wrap-inline-at-range/wrap-inline-void/index.js

@@ -0,0 +1,21 @@
+
+export default function (state) {
+  const { document, selection } = state
+  const texts = document.getTexts()
+  const second = texts.get(1)
+  const range = selection.merge({
+    anchorKey: second.key,
+    anchorOffset: 0,
+    focusKey: second.key,
+    focusOffset: 0
+  })
+
+  const next = state
+    .transform()
+    .wrapInlineAtRange(range, {
+      type: 'link'
+    })
+    .apply()
+
+  return next
+}

test/transforms/fixtures/at-range/wrap-inline-at-range/wrap-inline-void/input.yaml

@@ -0,0 +1,13 @@
+
+nodes:
+  - kind: block
+    type: paragraph
+    nodes:
+      - kind: text
+        text: ""
+      - kind: inline
+        key: image
+        isVoid: true
+        type: image
+      - kind: text
+        text: ""

test/transforms/fixtures/at-range/wrap-inline-at-range/wrap-inline-void/output.yaml

@@ -0,0 +1,15 @@
+
+nodes:
+  - kind: block
+    type: paragraph
+    nodes:
+      - kind: inline
+        type: link
+        nodes:
+          - kind: text
+            text: ""
+          - kind: inline
+            isVoid: true
+            type: image
+          - kind: text
+            text: ""