react-native-richify 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/lib/commonjs/components/OverlayText.d.js.map +1 -1
  2. package/lib/commonjs/components/OverlayText.js +8 -2
  3. package/lib/commonjs/components/OverlayText.js.map +1 -1
  4. package/lib/commonjs/components/RichTextInput.d.js.map +1 -1
  5. package/lib/commonjs/components/RichTextInput.js +73 -45
  6. package/lib/commonjs/components/RichTextInput.js.map +1 -1
  7. package/lib/commonjs/components/Toolbar.d.js.map +1 -1
  8. package/lib/commonjs/components/Toolbar.js +4 -7
  9. package/lib/commonjs/components/Toolbar.js.map +1 -1
  10. package/lib/commonjs/components/ToolbarButton.d.js.map +1 -1
  11. package/lib/commonjs/components/ToolbarButton.js.map +1 -1
  12. package/lib/commonjs/constants/defaultStyles.d.js.map +1 -1
  13. package/lib/commonjs/constants/defaultStyles.js +26 -1
  14. package/lib/commonjs/constants/defaultStyles.js.map +1 -1
  15. package/lib/commonjs/context/RichTextContext.d.js.map +1 -1
  16. package/lib/commonjs/context/RichTextContext.js.map +1 -1
  17. package/lib/commonjs/hooks/useFormatting.d.js.map +1 -1
  18. package/lib/commonjs/hooks/useFormatting.js +7 -1
  19. package/lib/commonjs/hooks/useFormatting.js.map +1 -1
  20. package/lib/commonjs/hooks/useRichText.d.js.map +1 -1
  21. package/lib/commonjs/hooks/useRichText.js +62 -7
  22. package/lib/commonjs/hooks/useRichText.js.map +1 -1
  23. package/lib/commonjs/hooks/useSelection.d.js.map +1 -1
  24. package/lib/commonjs/hooks/useSelection.js.map +1 -1
  25. package/lib/commonjs/index.d.js +19 -0
  26. package/lib/commonjs/index.d.js.map +1 -1
  27. package/lib/commonjs/index.js +19 -0
  28. package/lib/commonjs/index.js.map +1 -1
  29. package/lib/commonjs/types/index.d.js.map +1 -1
  30. package/lib/commonjs/types/index.js.map +1 -1
  31. package/lib/commonjs/utils/formatter.d.js.map +1 -1
  32. package/lib/commonjs/utils/formatter.js +1 -4
  33. package/lib/commonjs/utils/formatter.js.map +1 -1
  34. package/lib/commonjs/utils/parser.d.js.map +1 -1
  35. package/lib/commonjs/utils/parser.js.map +1 -1
  36. package/lib/commonjs/utils/serializer.d.js +6 -0
  37. package/lib/commonjs/utils/serializer.d.js.map +1 -0
  38. package/lib/commonjs/utils/serializer.js +163 -0
  39. package/lib/commonjs/utils/serializer.js.map +1 -0
  40. package/lib/commonjs/utils/styleMapper.d.js.map +1 -1
  41. package/lib/commonjs/utils/styleMapper.js.map +1 -1
  42. package/lib/module/components/OverlayText.d.js.map +1 -1
  43. package/lib/module/components/OverlayText.js +8 -2
  44. package/lib/module/components/OverlayText.js.map +1 -1
  45. package/lib/module/components/RichTextInput.d.js.map +1 -1
  46. package/lib/module/components/RichTextInput.js +75 -48
  47. package/lib/module/components/RichTextInput.js.map +1 -1
  48. package/lib/module/components/Toolbar.d.js.map +1 -1
  49. package/lib/module/components/Toolbar.js +4 -7
  50. package/lib/module/components/Toolbar.js.map +1 -1
  51. package/lib/module/components/ToolbarButton.d.js.map +1 -1
  52. package/lib/module/components/ToolbarButton.js.map +1 -1
  53. package/lib/module/constants/defaultStyles.d.js.map +1 -1
  54. package/lib/module/constants/defaultStyles.js +26 -1
  55. package/lib/module/constants/defaultStyles.js.map +1 -1
  56. package/lib/module/context/RichTextContext.d.js.map +1 -1
  57. package/lib/module/context/RichTextContext.js.map +1 -1
  58. package/lib/module/hooks/useFormatting.d.js.map +1 -1
  59. package/lib/module/hooks/useFormatting.js +7 -1
  60. package/lib/module/hooks/useFormatting.js.map +1 -1
  61. package/lib/module/hooks/useRichText.d.js.map +1 -1
  62. package/lib/module/hooks/useRichText.js +62 -7
  63. package/lib/module/hooks/useRichText.js.map +1 -1
  64. package/lib/module/hooks/useSelection.d.js.map +1 -1
  65. package/lib/module/hooks/useSelection.js.map +1 -1
  66. package/lib/module/index.d.js +1 -0
  67. package/lib/module/index.d.js.map +1 -1
  68. package/lib/module/index.js +1 -0
  69. package/lib/module/index.js.map +1 -1
  70. package/lib/module/types/index.d.js.map +1 -1
  71. package/lib/module/types/index.js.map +1 -1
  72. package/lib/module/utils/formatter.d.js.map +1 -1
  73. package/lib/module/utils/formatter.js +1 -4
  74. package/lib/module/utils/formatter.js.map +1 -1
  75. package/lib/module/utils/parser.d.js.map +1 -1
  76. package/lib/module/utils/parser.js.map +1 -1
  77. package/lib/module/utils/serializer.d.js +4 -0
  78. package/lib/module/utils/serializer.d.js.map +1 -0
  79. package/lib/module/utils/serializer.js +157 -0
  80. package/lib/module/utils/serializer.js.map +1 -0
  81. package/lib/module/utils/styleMapper.d.js.map +1 -1
  82. package/lib/module/utils/styleMapper.js.map +1 -1
  83. package/lib/typescript/src/components/OverlayText.d.ts.map +1 -1
  84. package/lib/typescript/src/components/RichTextInput.d.ts +2 -13
  85. package/lib/typescript/src/components/RichTextInput.d.ts.map +1 -1
  86. package/lib/typescript/src/constants/defaultStyles.d.ts +2 -0
  87. package/lib/typescript/src/constants/defaultStyles.d.ts.map +1 -1
  88. package/lib/typescript/src/hooks/useFormatting.d.ts.map +1 -1
  89. package/lib/typescript/src/hooks/useRichText.d.ts.map +1 -1
  90. package/lib/typescript/src/index.d.ts +2 -1
  91. package/lib/typescript/src/index.d.ts.map +1 -1
  92. package/lib/typescript/src/types/index.d.ts +41 -11
  93. package/lib/typescript/src/types/index.d.ts.map +1 -1
  94. package/lib/typescript/src/utils/formatter.d.ts.map +1 -1
  95. package/lib/typescript/src/utils/serializer.d.ts +14 -0
  96. package/lib/typescript/src/utils/serializer.d.ts.map +1 -0
  97. package/package.json +1 -1
  98. package/src/components/OverlayText.tsx +11 -3
  99. package/src/components/RichTextInput.d.ts +3 -14
  100. package/src/components/RichTextInput.tsx +111 -48
  101. package/src/components/Toolbar.d.ts +1 -1
  102. package/src/components/Toolbar.tsx +5 -5
  103. package/src/components/ToolbarButton.d.ts +1 -1
  104. package/src/constants/defaultStyles.d.ts +4 -2
  105. package/src/constants/defaultStyles.ts +26 -1
  106. package/src/hooks/useFormatting.ts +14 -1
  107. package/src/hooks/useRichText.ts +103 -10
  108. package/src/index.d.ts +2 -1
  109. package/src/index.ts +8 -0
  110. package/src/types/index.d.ts +41 -11
  111. package/src/types/index.ts +44 -11
  112. package/src/utils/formatter.ts +1 -5
  113. package/src/utils/serializer.d.ts +13 -0
  114. package/src/utils/serializer.ts +223 -0
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAIrF;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,WAAW,GACX,eAAe,GACf,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,MAAM,EAAE,WAAW,CAAC;CACrB;AAID;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;CACb;AAID;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,6CAA6C;IAC7C,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,+BAA+B;IAC/B,SAAS,EAAE,cAAc,CAAC;IAC1B,0EAA0E;IAC1E,YAAY,EAAE,WAAW,CAAC;CAC3B;AAID;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,8DAA8D;IAC9D,gBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,WAAW,EAC5C,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAClB,IAAI,CAAC;IACV,iDAAiD;IACjD,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,oDAAoD;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,0DAA0D;IAC1D,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,yCAAyC;IACzC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8CAA8C;IAC9C,qBAAqB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3D,uCAAuC;IACvC,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,wDAAwD;IACxD,UAAU,EAAE,MAAM,aAAa,EAAE,CAAC;IAClC,oEAAoE;IACpE,UAAU,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yBAAyB;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAID;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,wCAAwC;IACxC,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,mDAAmD;IACnD,4BAA4B,CAAC,EAAE,SAAS,CAAC;IACzC,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa;IACb,MAAM,CAAC,EAAE;QACP,4BAA4B;QAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,sCAAsC;QACtC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,kBAAkB;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,8BAA8B;QAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,0BAA0B;QAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,4BAA4B;QAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,4BAA4B;QAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;KACrB,CAAC;CACH;AAID;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,KAAK,CAAC,YAAY,CAAC;CAC1B;AAID;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,uBAAuB;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uBAAuB;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,OAAO,EAAE,eAAe,CAAC;IACzB,mCAAmC;IACnC,KAAK,EAAE,aAAa,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,uBAAuB;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,KAAK,EAAE,WAAW,EAAE,CAAC;QACrB,KAAK,EAAE,aAAa,CAAC;QACrB,OAAO,EAAE,eAAe,CAAC;KAC1B,KAAK,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACvD,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACnC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,IAAI,CACnB,cAAc,EACZ,OAAO,GACP,cAAc,GACd,mBAAmB,GACnB,WAAW,GACX,aAAa,GACb,UAAU,GACV,WAAW,GACX,WAAW,CACd,CAAC;IACF,sCAAsC;IACtC,aAAa,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IAC9C,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC9C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAC;AAUlB;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,aAAa,EAAE,CAgBjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,WAAW,EAC7D,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,EAAE,CAOjB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,YAAY,GAClB,aAAa,EAAE,CAWjB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,GACxB,WAAW,CAwCb;AAgID,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAC;AAQlB;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,aAAa,EAAE,CAgBjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,WAAW,EAC7D,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,EAAE,CAOjB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,YAAY,GAClB,aAAa,EAAE,CASjB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,SAAS,EAAE,cAAc,GACxB,WAAW,CAwCb;AAgID,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1,14 @@
1
+ import type { OutputFormat, StyledSegment } from '../types';
2
+ /**
3
+ * Serialize styled segments as Markdown or HTML.
4
+ */
5
+ export declare function serializeSegments(segments: StyledSegment[], format?: OutputFormat): string;
6
+ /**
7
+ * Convenience wrapper for Markdown output.
8
+ */
9
+ export declare function segmentsToMarkdown(segments: StyledSegment[]): string;
10
+ /**
11
+ * Convenience wrapper for HTML output.
12
+ */
13
+ export declare function segmentsToHTML(segments: StyledSegment[]): string;
14
+ //# sourceMappingURL=serializer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"serializer.d.ts","sourceRoot":"","sources":["../../../../src/utils/serializer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,YAAY,EACZ,aAAa,EACd,MAAM,UAAU,CAAC;AAIlB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,EAAE,EACzB,MAAM,GAAE,YAAyB,GAChC,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAEpE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAEhE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-richify",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "A production-grade, fully customizable React Native Rich Text Input using the Overlay Technique — no WebView required.",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -17,21 +17,29 @@ export const OverlayText: React.FC<OverlayTextProps> = React.memo(
17
17
  const overlayStyle =
18
18
  resolvedTheme.overlayContainerStyle ??
19
19
  DEFAULT_THEME.overlayContainerStyle;
20
+ const resolvedBaseTextStyle =
21
+ baseTextStyle ??
22
+ resolvedTheme.baseTextStyle ??
23
+ DEFAULT_THEME.baseTextStyle;
24
+ const overlayTheme = {
25
+ ...resolvedTheme,
26
+ baseTextStyle: resolvedBaseTextStyle,
27
+ };
20
28
 
21
29
  return (
22
30
  <View style={overlayStyle} pointerEvents="none">
23
- <Text>
31
+ <Text style={resolvedBaseTextStyle}>
24
32
  {segments.map((segment, index) => {
25
33
  if (segment.text.length === 0 && segments.length > 1) {
26
34
  return null;
27
35
  }
28
36
 
29
- const textStyle = segmentToTextStyle(segment, resolvedTheme);
37
+ const textStyle = segmentToTextStyle(segment, overlayTheme);
30
38
 
31
39
  return (
32
40
  <Text
33
41
  key={`${index}-${segment.text.slice(0, 8)}`}
34
- style={[baseTextStyle, textStyle]}
42
+ style={textStyle}
35
43
  >
36
44
  {segment.text}
37
45
  </Text>
@@ -1,20 +1,9 @@
1
1
  import React from 'react';
2
2
  import type { RichTextInputProps } from '../types';
3
3
  /**
4
- * RichTextInput The main rich text editor component.
4
+ * RichTextInput — The main rich text editor component.
5
5
  *
6
- * Uses the Overlay Technique:
7
- * - A transparent `TextInput` on top captures user input and selection
8
- * - A styled `<Text>` layer behind it renders the formatted content
9
- * - Both share identical font metrics for pixel-perfect alignment
10
- *
11
- * @example
12
- * ```tsx
13
- * <RichTextInput
14
- * placeholder="Start typing..."
15
- * showToolbar
16
- * onChangeSegments={(segments) => console.log(segments)}
17
- * />
18
- * ```
6
+ * Uses a plain `TextInput` for editing and renders the serialized rich output
7
+ * below it as Markdown or HTML.
19
8
  */
20
9
  export declare const RichTextInput: React.FC<RichTextInputProps>;
@@ -1,34 +1,35 @@
1
- import React, { useEffect, useCallback } from 'react';
1
+ import React, { useEffect, useCallback, useMemo, useRef } from 'react';
2
2
  import {
3
- View,
4
- TextInput,
3
+ Animated,
4
+ Easing,
5
+ ScrollView,
5
6
  StyleSheet,
7
+ Text,
8
+ TextInput,
9
+ View,
6
10
  type NativeSyntheticEvent,
7
11
  type TextInputSelectionChangeEventData,
8
12
  } from 'react-native';
9
13
  import type { RichTextInputProps } from '../types';
10
14
  import { DEFAULT_THEME } from '../constants/defaultStyles';
11
- import { segmentsToPlainText } from '../utils/parser';
12
15
  import { useRichText } from '../hooks/useRichText';
13
- import { OverlayText } from './OverlayText';
16
+ import { segmentsToPlainText } from '../utils/parser';
17
+ import { serializeSegments } from '../utils/serializer';
14
18
  import { Toolbar } from './Toolbar';
15
19
 
20
+ const OUTPUT_PANEL_HEIGHT = 180;
21
+ const isJestRuntime =
22
+ typeof (
23
+ globalThis as {
24
+ process?: { env?: { JEST_WORKER_ID?: string } };
25
+ }
26
+ ).process?.env?.JEST_WORKER_ID === 'string';
27
+
16
28
  /**
17
29
  * RichTextInput — The main rich text editor component.
18
30
  *
19
- * Uses the Overlay Technique:
20
- * - A transparent `TextInput` on top captures user input and selection
21
- * - A styled `<Text>` layer behind it renders the formatted content
22
- * - Both share identical font metrics for pixel-perfect alignment
23
- *
24
- * @example
25
- * ```tsx
26
- * <RichTextInput
27
- * placeholder="Start typing..."
28
- * showToolbar
29
- * onChangeSegments={(segments) => console.log(segments)}
30
- * />
31
- * ```
31
+ * Uses a plain `TextInput` for editing and renders the serialized rich output
32
+ * below it as Markdown or HTML.
32
33
  */
33
34
  export const RichTextInput: React.FC<RichTextInputProps> = ({
34
35
  initialSegments,
@@ -41,6 +42,9 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
41
42
  toolbarPosition = 'top',
42
43
  toolbarItems,
43
44
  theme,
45
+ showOutputPreview = true,
46
+ outputFormat = 'markdown',
47
+ onChangeOutput,
44
48
  multiline = true,
45
49
  minHeight = 120,
46
50
  maxHeight,
@@ -50,6 +54,7 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
50
54
  onReady,
51
55
  }) => {
52
56
  const resolvedTheme = theme ?? DEFAULT_THEME;
57
+ const previewProgress = useRef(new Animated.Value(0)).current;
53
58
 
54
59
  const { state, actions } = useRichText({
55
60
  initialSegments,
@@ -57,15 +62,35 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
57
62
  onChangeText,
58
63
  });
59
64
 
60
- // Expose actions via onReady callback
61
65
  useEffect(() => {
62
66
  onReady?.(actions);
63
- }, [onReady, actions]);
67
+ }, [actions, onReady]);
64
68
 
65
- // Build plain text for the TextInput value
66
69
  const plainText = segmentsToPlainText(state.segments);
70
+ const serializedOutput = useMemo(
71
+ () => serializeSegments(state.segments, outputFormat),
72
+ [outputFormat, state.segments],
73
+ );
74
+ const shouldShowOutputPreview = showOutputPreview && plainText.length > 0;
75
+
76
+ useEffect(() => {
77
+ onChangeOutput?.(serializedOutput, outputFormat);
78
+ }, [onChangeOutput, outputFormat, serializedOutput]);
79
+
80
+ useEffect(() => {
81
+ if (isJestRuntime) {
82
+ previewProgress.setValue(shouldShowOutputPreview ? 1 : 0);
83
+ return;
84
+ }
85
+
86
+ Animated.timing(previewProgress, {
87
+ toValue: shouldShowOutputPreview ? 1 : 0,
88
+ duration: 180,
89
+ easing: Easing.out(Easing.cubic),
90
+ useNativeDriver: false,
91
+ }).start();
92
+ }, [previewProgress, shouldShowOutputPreview]);
67
93
 
68
- // Handle selection change from TextInput
69
94
  const onSelectionChange = useCallback(
70
95
  (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
71
96
  const { start, end } = e.nativeEvent.selection;
@@ -74,25 +99,49 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
74
99
  [actions],
75
100
  );
76
101
 
77
- // Container style
78
102
  const containerStyle = [
79
103
  resolvedTheme.containerStyle ?? DEFAULT_THEME.containerStyle,
80
104
  ];
81
-
82
- // Input area style
83
105
  const inputAreaStyle = [
84
106
  styles.inputArea,
85
107
  { minHeight },
86
108
  maxHeight ? { maxHeight } : undefined,
87
109
  ];
88
-
89
- // Input style
90
110
  const inputStyle = [
91
111
  styles.textInput,
112
+ resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
92
113
  resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
114
+ textInputProps?.style,
115
+ ];
116
+ const outputAnimatedStyle = {
117
+ maxHeight: previewProgress.interpolate({
118
+ inputRange: [0, 1],
119
+ outputRange: [0, OUTPUT_PANEL_HEIGHT],
120
+ }),
121
+ opacity: previewProgress,
122
+ marginTop: previewProgress.interpolate({
123
+ inputRange: [0, 1],
124
+ outputRange: [0, 12],
125
+ }),
126
+ transform: [
127
+ {
128
+ translateY: previewProgress.interpolate({
129
+ inputRange: [0, 1],
130
+ outputRange: [-8, 0],
131
+ }),
132
+ },
133
+ ],
134
+ };
135
+ const outputContainerStyle = [
136
+ resolvedTheme.outputContainerStyle ?? DEFAULT_THEME.outputContainerStyle,
137
+ ];
138
+ const outputLabelStyle = [
139
+ resolvedTheme.outputLabelStyle ?? DEFAULT_THEME.outputLabelStyle,
140
+ ];
141
+ const outputTextStyle = [
142
+ resolvedTheme.outputTextStyle ?? DEFAULT_THEME.outputTextStyle,
93
143
  ];
94
144
 
95
- // Toolbar component
96
145
  const toolbarComponent = showToolbar ? (
97
146
  <Toolbar
98
147
  actions={actions}
@@ -103,29 +152,28 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
103
152
  />
104
153
  ) : null;
105
154
 
106
- // Toolbar border
107
155
  const toolbarBorderStyle =
108
156
  toolbarPosition === 'top'
109
- ? { borderBottomWidth: 1, borderBottomColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder }
110
- : { borderTopWidth: 1, borderTopColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder };
157
+ ? {
158
+ borderBottomWidth: 1,
159
+ borderBottomColor:
160
+ resolvedTheme.colors?.toolbarBorder ??
161
+ DEFAULT_THEME.colors?.toolbarBorder,
162
+ }
163
+ : {
164
+ borderTopWidth: 1,
165
+ borderTopColor:
166
+ resolvedTheme.colors?.toolbarBorder ??
167
+ DEFAULT_THEME.colors?.toolbarBorder,
168
+ };
111
169
 
112
170
  return (
113
171
  <View style={containerStyle}>
114
- {/* Toolbar — Top */}
115
172
  {toolbarPosition === 'top' && toolbarComponent && (
116
173
  <View style={toolbarBorderStyle}>{toolbarComponent}</View>
117
174
  )}
118
175
 
119
- {/* Editor Area */}
120
176
  <View style={inputAreaStyle}>
121
- {/* Overlay — Styled text rendering (behind TextInput) */}
122
- <OverlayText
123
- segments={state.segments}
124
- baseTextStyle={resolvedTheme.baseTextStyle}
125
- theme={resolvedTheme}
126
- />
127
-
128
- {/* TextInput — Transparent layer on top for input capture */}
129
177
  <TextInput
130
178
  {...textInputProps}
131
179
  style={inputStyle}
@@ -145,11 +193,28 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
145
193
  resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
146
194
  }
147
195
  textAlignVertical="top"
148
- scrollEnabled={true}
196
+ scrollEnabled={typeof maxHeight === 'number'}
149
197
  />
198
+
199
+ {showOutputPreview && (
200
+ <Animated.View
201
+ pointerEvents={shouldShowOutputPreview ? 'auto' : 'none'}
202
+ style={[styles.outputAnimatedWrapper, outputAnimatedStyle]}
203
+ >
204
+ <View style={outputContainerStyle}>
205
+ <Text style={outputLabelStyle}>
206
+ {outputFormat === 'html' ? 'HTML output' : 'Markdown output'}
207
+ </Text>
208
+ <ScrollView showsVerticalScrollIndicator={false}>
209
+ <Text selectable style={outputTextStyle}>
210
+ {serializedOutput}
211
+ </Text>
212
+ </ScrollView>
213
+ </View>
214
+ </Animated.View>
215
+ )}
150
216
  </View>
151
217
 
152
- {/* Toolbar — Bottom */}
153
218
  {toolbarPosition === 'bottom' && toolbarComponent && (
154
219
  <View style={toolbarBorderStyle}>{toolbarComponent}</View>
155
220
  )}
@@ -164,11 +229,9 @@ const styles = StyleSheet.create({
164
229
  position: 'relative',
165
230
  },
166
231
  textInput: {
167
- // The TextInput must be transparent so the overlay text shows through.
168
- // Only the caret/cursor and selection highlight are visible.
169
- color: 'transparent',
170
- // Ensure it matches the overlay text positioning exactly.
171
232
  position: 'relative',
172
- zIndex: 1,
233
+ },
234
+ outputAnimatedWrapper: {
235
+ overflow: 'hidden',
173
236
  },
174
237
  });
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { ToolbarProps } from '@/types';
2
+ import type { ToolbarProps } from '../types';
3
3
  /**
4
4
  * Formatting toolbar for the rich text editor.
5
5
  *
@@ -20,17 +20,17 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
20
20
 
21
21
  // Compute active state for each item
22
22
  const enrichedItems: ToolbarItem[] = useMemo(() => {
23
+ const selectionStyle = actions.getSelectionStyle();
24
+
23
25
  return toolbarItems.map((item) => {
24
26
  let isActive = false;
25
27
 
26
28
  if (item.format) {
27
- // Check if the format is currently active
28
- const { activeStyles } = state;
29
- isActive = !!activeStyles[item.format];
29
+ isActive = actions.isFormatActive(item.format);
30
30
  }
31
31
 
32
32
  if (item.heading) {
33
- isActive = state.activeStyles.heading === item.heading;
33
+ isActive = selectionStyle.heading === item.heading;
34
34
  }
35
35
 
36
36
  return {
@@ -38,7 +38,7 @@ export const Toolbar: React.FC<ToolbarProps> = React.memo(
38
38
  active: item.active ?? isActive,
39
39
  };
40
40
  });
41
- }, [toolbarItems, state]);
41
+ }, [actions, toolbarItems]);
42
42
 
43
43
  // Custom render
44
44
  if (renderToolbar) {
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { ToolbarButtonProps } from '@/types';
2
+ import type { ToolbarButtonProps } from '../types';
3
3
  /**
4
4
  * A single toolbar button that toggles a formatting option.
5
5
  * Supports custom rendering via the `renderButton` prop.
@@ -1,4 +1,4 @@
1
- import type { RichTextTheme, FormatStyle, ToolbarItem } from '@/types';
1
+ import type { RichTextTheme, FormatStyle, ToolbarItem } from '../types';
2
2
  /**
3
3
  * Default color palette used throughout the editor.
4
4
  */
@@ -9,6 +9,8 @@ export declare const DEFAULT_COLORS: {
9
9
  readonly placeholder: "#9CA3AF";
10
10
  readonly toolbarBackground: "#F9FAFB";
11
11
  readonly toolbarBorder: "#E5E7EB";
12
+ readonly outputBackground: "#F8FAFC";
13
+ readonly outputLabel: "#475569";
12
14
  readonly cursor: "#6366F1";
13
15
  readonly activeButtonBg: "#EEF2FF";
14
16
  readonly codeBackground: "#F3F4F6";
@@ -32,7 +34,7 @@ export declare const DEFAULT_BASE_TEXT_STYLE: {
32
34
  readonly fontFamily: undefined;
33
35
  };
34
36
  /**
35
- * Empty format style no formatting applied.
37
+ * Empty format style — no formatting applied.
36
38
  */
37
39
  export declare const EMPTY_FORMAT_STYLE: FormatStyle;
38
40
  /**
@@ -10,6 +10,8 @@ export const DEFAULT_COLORS = {
10
10
  placeholder: '#9CA3AF',
11
11
  toolbarBackground: '#F9FAFB',
12
12
  toolbarBorder: '#E5E7EB',
13
+ outputBackground: '#F8FAFC',
14
+ outputLabel: '#475569',
13
15
  cursor: '#6366F1',
14
16
  activeButtonBg: '#EEF2FF',
15
17
  codeBackground: '#F3F4F6',
@@ -64,7 +66,7 @@ export const DEFAULT_THEME: RichTextTheme = {
64
66
  inputStyle: {
65
67
  fontSize: DEFAULT_BASE_TEXT_STYLE.fontSize,
66
68
  lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
67
- color: 'transparent',
69
+ color: DEFAULT_COLORS.text,
68
70
  paddingHorizontal: 16,
69
71
  paddingVertical: 12,
70
72
  textAlignVertical: 'top',
@@ -83,6 +85,29 @@ export const DEFAULT_THEME: RichTextTheme = {
83
85
  lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
84
86
  color: DEFAULT_COLORS.text,
85
87
  },
88
+ outputContainerStyle: {
89
+ marginHorizontal: 12,
90
+ marginBottom: 12,
91
+ padding: 12,
92
+ borderRadius: 10,
93
+ borderWidth: 1,
94
+ borderColor: DEFAULT_COLORS.toolbarBorder,
95
+ backgroundColor: DEFAULT_COLORS.outputBackground,
96
+ },
97
+ outputLabelStyle: {
98
+ marginBottom: 8,
99
+ fontSize: 12,
100
+ fontWeight: '700',
101
+ letterSpacing: 0.4,
102
+ color: DEFAULT_COLORS.outputLabel,
103
+ textTransform: 'uppercase',
104
+ },
105
+ outputTextStyle: {
106
+ fontSize: 14,
107
+ lineHeight: 20,
108
+ color: DEFAULT_COLORS.text,
109
+ fontFamily: 'monospace',
110
+ },
86
111
  toolbarStyle: {
87
112
  flexDirection: 'row',
88
113
  alignItems: 'center',
@@ -78,10 +78,23 @@ export function useFormatting({
78
78
 
79
79
  const setHeading = useCallback(
80
80
  (level: HeadingLevel) => {
81
+ if (selection.start === selection.end) {
82
+ onActiveStylesChange({
83
+ ...activeStyles,
84
+ heading: level === 'none' ? undefined : level,
85
+ });
86
+ }
87
+
81
88
  const newSegments = setHeadingOnLine(segments, selection, level);
82
89
  onSegmentsChange(newSegments);
83
90
  },
84
- [segments, selection, onSegmentsChange],
91
+ [
92
+ activeStyles,
93
+ onActiveStylesChange,
94
+ onSegmentsChange,
95
+ segments,
96
+ selection,
97
+ ],
85
98
  );
86
99
 
87
100
  const setColor = useCallback(