Estoy trabajando en un hack para soporte de mesa (un nivel de profundidad) usando draft.js

Tengo un requisito: toda la funcionalidad del editor existente también debe funcionar dentro de esta tabla

Te presento tres opciones, elige una y explica por qué lo hiciste :

  1. Editores anidados (uno para cada celda): supongo que tendría que implementar el manejo de selección entre editores
  2. Las celdas de la tabla como unidades, envueltas en un Componente de bloque personalizado que representa la tabla y administra columnas y filas. - Será costoso desarrollar esto, ya que tendré que interferir con una gran cantidad de manejo y representación de eventos.
  3. ¿Hay alguna otra manera que creas que podría funcionar mejor?
5
nimrod 25 may. 2017 a las 17:10

2 respuestas

La mejor respuesta

Estoy usando Editores anidados en cada celda ( opción 1 ). Implementar funcionalidades de estilo dentro de cada celda es mucho más fácil. Puede usar las funcionalidades que ya ha usado en el Editor 'principal'.

Hay dos componentes principales en mi implementación de la tabla. El componente Table, un componente de bloque personalizado. Y dentro de cada celda de ese componente está el Subeditor (un componente Editor anidado). El EditorState para cada Subeditor se almacena en una tienda Redux.

Sin embargo, el manejo de la selección entre editores es bastante difícil.

0
Arie M. Prasetyo 19 jun. 2017 a las 04:30

Manejo tablas en draft-js solo con el Editor principal y un componente de bloque TableCell personalizado y ReactDOM.createPortal.

  1. Cada componente TableCell es solo un EditorBlock simple.

  2. Sin embargo, almaceno la información básica necesaria para recrear la estructura de la tabla en los metadatos del primer bloque / celda de la tabla: por ejemplo, estilo de tabla y una matriz bidimensional de objetos que especifican el tipo de elemento (<td> o <th>) y estilo a nivel de bloque para cada celda.

  3. Cuando renderizo el primer bloque, renderizo su componente EditorBlock envuelto en la estructura DOM completa de la tabla. Las etiquetas <th> / <td> para todas menos la primera celda están vacías, pero reciben un atributo de datos correspondiente a su posición en la tabla.

  4. Luego uso ReactDOM.createPortal para representar cada uno de los bloques TableCell posteriores en la posición correcta en la tabla.

Por lo que sabe draft-js, solo representa bloques en la forma lineal habitual. Esto hace que editar, administrar el estado de selección y la importación / exportación de html no sea más difícil que para cualquier otro tipo de bloque.

0
EvanMorrison 22 dic. 2019 a las 09:47