plugin.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /**
  2. * TinyMCE version 8.0.2 (2025-08-14)
  3. */
  4. (function () {
  5. 'use strict';
  6. var global$2 = tinymce.util.Tools.resolve('tinymce.PluginManager');
  7. var global$1 = tinymce.util.Tools.resolve('tinymce.dom.RangeUtils');
  8. var global = tinymce.util.Tools.resolve('tinymce.util.Tools');
  9. const option = (name) => (editor) => editor.options.get(name);
  10. const register$2 = (editor) => {
  11. const registerOption = editor.options.register;
  12. registerOption('allow_html_in_named_anchor', {
  13. processor: 'boolean',
  14. default: false
  15. });
  16. };
  17. const allowHtmlInNamedAnchor = option('allow_html_in_named_anchor');
  18. const namedAnchorSelector = 'a:not([href])';
  19. const isEmptyString = (str) => !str;
  20. const getIdFromAnchor = (elm) => {
  21. const id = elm.getAttribute('id') || elm.getAttribute('name');
  22. return id || '';
  23. };
  24. const isAnchor = (elm) => elm.nodeName.toLowerCase() === 'a';
  25. const isNamedAnchor = (elm) => isAnchor(elm) && !elm.getAttribute('href') && getIdFromAnchor(elm) !== '';
  26. const isEmptyNamedAnchor = (elm) => isNamedAnchor(elm) && !elm.firstChild;
  27. const removeEmptyNamedAnchorsInSelection = (editor) => {
  28. const dom = editor.dom;
  29. global$1(dom).walk(editor.selection.getRng(), (nodes) => {
  30. global.each(nodes, (node) => {
  31. if (isEmptyNamedAnchor(node)) {
  32. dom.remove(node, false);
  33. }
  34. });
  35. });
  36. };
  37. const isValidId = (id) =>
  38. // Follows HTML4 rules: https://www.w3.org/TR/html401/types.html#type-id
  39. /^[A-Za-z][A-Za-z0-9\-:._]*$/.test(id);
  40. const getNamedAnchor = (editor) => editor.dom.getParent(editor.selection.getStart(), namedAnchorSelector);
  41. const getId = (editor) => {
  42. const anchor = getNamedAnchor(editor);
  43. if (anchor) {
  44. return getIdFromAnchor(anchor);
  45. }
  46. else {
  47. return '';
  48. }
  49. };
  50. const createAnchor = (editor, id) => {
  51. editor.undoManager.transact(() => {
  52. if (!allowHtmlInNamedAnchor(editor)) {
  53. editor.selection.collapse(true);
  54. }
  55. if (editor.selection.isCollapsed()) {
  56. editor.insertContent(editor.dom.createHTML('a', { id }));
  57. }
  58. else {
  59. // Remove any empty named anchors in the selection as they cannot be removed by the formatter since they are cef
  60. removeEmptyNamedAnchorsInSelection(editor);
  61. // Format is set up to truncate any partially selected named anchors so that they are not completely removed
  62. editor.formatter.remove('namedAnchor', undefined, undefined, true);
  63. // Insert new anchor using the formatter - will wrap selected content in anchor
  64. editor.formatter.apply('namedAnchor', { value: id });
  65. // Need to add visual classes to anchors if required
  66. editor.addVisual();
  67. }
  68. });
  69. };
  70. const updateAnchor = (editor, id, anchorElement) => {
  71. anchorElement.removeAttribute('name');
  72. anchorElement.id = id;
  73. editor.addVisual(); // Need to add visual classes to anchors if required
  74. editor.undoManager.add();
  75. };
  76. const insert = (editor, id) => {
  77. const anchor = getNamedAnchor(editor);
  78. if (anchor) {
  79. updateAnchor(editor, id, anchor);
  80. }
  81. else {
  82. createAnchor(editor, id);
  83. }
  84. editor.focus();
  85. };
  86. const insertAnchor = (editor, newId) => {
  87. if (!isValidId(newId)) {
  88. editor.windowManager.alert('ID should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.');
  89. return false;
  90. }
  91. else {
  92. insert(editor, newId);
  93. return true;
  94. }
  95. };
  96. const open = (editor) => {
  97. const currentId = getId(editor);
  98. editor.windowManager.open({
  99. title: 'Anchor',
  100. size: 'normal',
  101. body: {
  102. type: 'panel',
  103. items: [
  104. {
  105. name: 'id',
  106. type: 'input',
  107. label: 'ID',
  108. placeholder: 'example'
  109. }
  110. ]
  111. },
  112. buttons: [
  113. {
  114. type: 'cancel',
  115. name: 'cancel',
  116. text: 'Cancel'
  117. },
  118. {
  119. type: 'submit',
  120. name: 'save',
  121. text: 'Save',
  122. primary: true
  123. }
  124. ],
  125. initialData: {
  126. id: currentId
  127. },
  128. onSubmit: (api) => {
  129. if (insertAnchor(editor, api.getData().id)) { // TODO we need a better way to do validation
  130. api.close();
  131. }
  132. }
  133. });
  134. };
  135. const register$1 = (editor) => {
  136. editor.addCommand('mceAnchor', () => {
  137. open(editor);
  138. });
  139. };
  140. // Note: node.firstChild check is for the 'allow_html_in_named_anchor' setting
  141. // Only want to add contenteditable attributes if there is no text within the anchor
  142. const isNamedAnchorNode = (node) => isEmptyString(node.attr('href')) && !isEmptyString(node.attr('id') || node.attr('name'));
  143. const isEmptyNamedAnchorNode = (node) => isNamedAnchorNode(node) && !node.firstChild;
  144. const setContentEditable = (state) => (nodes) => {
  145. for (let i = 0; i < nodes.length; i++) {
  146. const node = nodes[i];
  147. if (isEmptyNamedAnchorNode(node)) {
  148. node.attr('contenteditable', state);
  149. }
  150. }
  151. };
  152. const setup = (editor) => {
  153. editor.on('PreInit', () => {
  154. editor.parser.addNodeFilter('a', setContentEditable('false'));
  155. editor.serializer.addNodeFilter('a', setContentEditable(null));
  156. });
  157. };
  158. const registerFormats = (editor) => {
  159. editor.formatter.register('namedAnchor', {
  160. inline: 'a',
  161. selector: namedAnchorSelector,
  162. remove: 'all',
  163. split: true,
  164. deep: true,
  165. attributes: {
  166. id: '%value'
  167. },
  168. onmatch: (node, _fmt, _itemName) => {
  169. return isNamedAnchor(node);
  170. }
  171. });
  172. };
  173. const onSetupEditable = (editor) => (api) => {
  174. const nodeChanged = () => {
  175. api.setEnabled(editor.selection.isEditable());
  176. };
  177. editor.on('NodeChange', nodeChanged);
  178. nodeChanged();
  179. return () => {
  180. editor.off('NodeChange', nodeChanged);
  181. };
  182. };
  183. const register = (editor) => {
  184. const onAction = () => editor.execCommand('mceAnchor');
  185. editor.ui.registry.addToggleButton('anchor', {
  186. icon: 'bookmark',
  187. tooltip: 'Anchor',
  188. onAction,
  189. onSetup: (buttonApi) => {
  190. const unbindSelectorChanged = editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind;
  191. const unbindEditableChanged = onSetupEditable(editor)(buttonApi);
  192. return () => {
  193. unbindSelectorChanged();
  194. unbindEditableChanged();
  195. };
  196. }
  197. });
  198. editor.ui.registry.addMenuItem('anchor', {
  199. icon: 'bookmark',
  200. text: 'Anchor...',
  201. onAction,
  202. onSetup: onSetupEditable(editor)
  203. });
  204. };
  205. var Plugin = () => {
  206. global$2.add('anchor', (editor) => {
  207. register$2(editor);
  208. setup(editor);
  209. register$1(editor);
  210. register(editor);
  211. editor.on('PreInit', () => {
  212. registerFormats(editor);
  213. });
  214. });
  215. };
  216. Plugin();
  217. /** *****
  218. * DO NOT EXPORT ANYTHING
  219. *
  220. * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE
  221. *******/
  222. })();