FEATURE Developping the format type behaviour

plugins/carhop-format-types/build/index-rtl.css

@@ -0,0 +1,61 @@
+/*!**********************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/footnote.css ***!
+  \**********************************************************************************************************************************************************************/
+body {
+	counter-reset: footnote-index;
+}
+.footnote-reference {
+	counter-increment: footnote-index;
+	position: relative;
+
+	&::after {
+		background-color: var(--wp--preset--color--primary);
+		color: #fff;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		content: counter(footnote-index);
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		font-weight: 600;
+		margin-right: 3px;
+		margin-left: 3px;
+	}
+}
+
+// Editor
+.footnote-reference {
+	.wp-block-post-content & {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-decoration-color: var(--wp--preset--color--primary);
+		text-decoration-thickness: 2px;
+		text-underline-offset: 2px;
+	}
+}
+
+.popover_footnote_field {
+	.components-popover__content {
+		padding: 10px !important;
+		min-width: 300px;
+	}
+	.popover_footnote_field_buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+		margin-top: 10px;
+
+		button.is-destructive {
+			background-color: #cc1818 !important;
+			color: #fff !important;
+		}
+
+		button.is-primary {
+			background-color: var(--wp--preset--color--primary) !important;
+			color: #fff !important;
+		}
+	}
+}
+

plugins/carhop-format-types/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => 'd91f9a9d13264a009654');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '71f06791f6231465e42e');

plugins/carhop-format-types/build/index.css

@@ -0,0 +1,63 @@
+/*!**********************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/footnote.css ***!
+  \**********************************************************************************************************************************************************************/
+body {
+	counter-reset: footnote-index;
+}
+.footnote-reference {
+	counter-increment: footnote-index;
+	position: relative;
+
+	&::after {
+		background-color: var(--wp--preset--color--primary);
+		color: #fff;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		content: counter(footnote-index);
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		font-weight: 600;
+		margin-left: 3px;
+		margin-right: 3px;
+	}
+}
+
+// Editor
+.footnote-reference {
+	.wp-block-post-content & {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-decoration-color: var(--wp--preset--color--primary);
+		text-decoration-thickness: 2px;
+		text-underline-offset: 2px;
+	}
+}
+
+.popover_footnote_field {
+	.components-popover__content {
+		padding: 10px !important;
+		min-width: 300px;
+	}
+	.popover_footnote_field_buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+		margin-top: 10px;
+
+		button.is-destructive {
+			background-color: #cc1818 !important;
+			color: #fff !important;
+		}
+
+		button.is-primary {
+			background-color: var(--wp--preset--color--primary) !important;
+			color: #fff !important;
+		}
+	}
+}
+
+
+/*# sourceMappingURL=index.css.map*/

plugins/carhop-format-types/build/index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,6BAA6B;AAC9B;AACA;CACC,iCAAiC;CACjC,kBAAkB;;CAElB;EACC,mDAAmD;EACnD,WAAW;EACX,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gCAAgC;EAChC,oBAAoB;EACpB,uBAAuB;EACvB,mBAAmB;EACnB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,iBAAiB;CAClB;AACD;;AAEA;;CAEC;EACC,0BAA0B;EAC1B,6BAA6B;EAC7B,wDAAwD;EACxD,8BAA8B;EAC9B,0BAA0B;CAC3B;AACD;;AAEA;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;CACA;EACC,aAAa;EACb,yBAAyB;EACzB,SAAS;EACT,gBAAgB;;EAEhB;GACC,oCAAoC;GACpC,sBAAsB;EACvB;;EAEA;GACC,8DAA8D;GAC9D,sBAAsB;EACvB;CACD;AACD","sources":["webpack:///./src/footnote.css"],"sourcesContent":["body {\r\n\tcounter-reset: footnote-index;\r\n}\r\n.footnote-reference {\r\n\tcounter-increment: footnote-index;\r\n\tposition: relative;\r\n\r\n\t&::after {\r\n\t\tbackground-color: var(--wp--preset--color--primary);\r\n\t\tcolor: #fff;\r\n\t\twidth: 30px;\r\n\t\theight: 30px;\r\n\t\tborder-radius: 50%;\r\n\t\tcontent: counter(footnote-index);\r\n\t\tdisplay: inline-flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tfont-size: 0.8em;\r\n\t\tfont-weight: 600;\r\n\t\tmargin-left: 3px;\r\n\t\tmargin-right: 3px;\r\n\t}\r\n}\r\n\r\n// Editor\r\n.footnote-reference {\r\n\t.wp-block-post-content & {\r\n\t\ttext-decoration: underline;\r\n\t\ttext-decoration-style: dotted;\r\n\t\ttext-decoration-color: var(--wp--preset--color--primary);\r\n\t\ttext-decoration-thickness: 2px;\r\n\t\ttext-underline-offset: 2px;\r\n\t}\r\n}\r\n\r\n.popover_footnote_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 300px;\r\n\t}\r\n\t.popover_footnote_field_buttons {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\tgap: 10px;\r\n\t\tmargin-top: 10px;\r\n\r\n\t\tbutton.is-destructive {\r\n\t\t\tbackground-color: #cc1818 !important;\r\n\t\t\tcolor: #fff !important;\r\n\t\t}\r\n\r\n\t\tbutton.is-primary {\r\n\t\t\tbackground-color: var(--wp--preset--color--primary) !important;\r\n\t\t\tcolor: #fff !important;\r\n\t\t}\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

plugins/carhop-format-types/build/index.js

@@ -33,37 +33,16 @@ const customPostType = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODUL
 
 /***/ }),
 
-/***/ "./node_modules/@wordpress/icons/build-module/library/trash.js":
+/***/ "./src/footnote.css":
-/*!*********************************************************************!*\
+/*!**************************!*\
-  !*** ./node_modules/@wordpress/icons/build-module/library/trash.js ***!
+  !*** ./src/footnote.css ***!
-  \*********************************************************************/
+  \**************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+// extracted by mini-css-extract-plugin
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
-/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
-/**
- * WordPress dependencies
- */
 
 
-const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"
-  })
-});
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (trash);
-//# sourceMappingURL=trash.js.map
-
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -86,16 +65,6 @@ module.exports = window["wp"]["components"];
 
 /***/ }),
 
-/***/ "@wordpress/data":
-/*!******************************!*\
-  !*** external ["wp","data"] ***!
-  \******************************/
-/***/ ((module) => {
-
-module.exports = window["wp"]["data"];
-
-/***/ }),
-
 /***/ "@wordpress/element":
 /*!*********************************!*\
   !*** external ["wp","element"] ***!
@@ -230,11 +199,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/custom-post-type.js");
-/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/trash.js");
 /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
 /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _footnote_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./footnote.css */ "./src/footnote.css");
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);
 
@@ -243,72 +210,78 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
- // pour les querry
+
 
 const formatName = "carhop-format/footnote";
-const EditFormatButton = props => {
+const FootnoteFormatButton = props => {
   const {
     isActive,
     value,
     onChange
   } = props;
   const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useState)(false);
-  // const [pendingDefinition, setPendingDefinition] = useState(false);
-
   const activeFormat = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.getActiveFormats)(value).filter(format => format.type === formatName)[0];
+  console.log(activeFormat);
+  function handleFootnoteContentChange(value) {
+    setFormat(value);
+  }
   function removeFormat() {
     setIsPopoverOpen(false);
     onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
       type: formatName
     }));
   }
-  function setFormat(postDatas) {
+  function setFormat(footnoteContent) {
-    setIsPopoverOpen(false);
     onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.applyFormat)(value, {
       type: formatName,
       attributes: {
-        // definitionId: postDatas.id.toString(),
+        footnoteContent: footnoteContent
-        // dataTooltipWord: postDatas.title,
       }
     }));
   }
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.BlockControls, {
-      children: [isPopoverOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Popover, {
+      children: [isPopoverOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Popover, {
         onClose: () => setIsPopoverOpen(false),
-        className: "popover_tooltip_field",
+        className: "popover_footnote_field",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.TextControl, {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.TextControl, {
           __nextHasNoMarginBottom: true,
           __next40pxDefaultSize: true,
           label: "Note de bas de page",
-          value: value,
+          value: activeFormat?.attributes?.footnoteContent || "",
-          onChange: value => setFormat(value)
+          onChange: handleFootnoteContentChange
-        })
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarGroup, {
+          className: "popover_footnote_field_buttons",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
-          isActive: isActive,
+            variant: "primary",
-          icon: !isActive ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"] : "edit",
+            onClick: () => setIsPopoverOpen(false),
-          label: !isActive ? "Ajouter une note de bas de page" : "Éditer la note de bas de page",
+            children: "Ok"
-          onClick: () => {
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
-            setFormat();
+            isDestructive: true,
-            setIsPopoverOpen(true);
+            onClick: () => removeFormat(),
-          }
+            children: "Supprimer"
-        }), isActive && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
-          icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
-          label: "Supprimer la note de bas de page",
-          onClick: () => {
-            removeFormat();
-          }
           })]
         })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarGroup, {
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
+          isActive: isActive,
+          icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
+          isPressed: isActive,
+          label: !isActive ? "Ajouter une note de bas de page" : "Éditer la note de bas de page",
+          onClick: () => setIsPopoverOpen(true)
+        })
+      })]
     })
   });
 };
 (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)(formatName, {
   title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Notes de bas de page", "carhop-format-types"),
-  tagName: "span",
+  tagName: "button",
+  attributes: {
+    footnoteContent: "footnote-content"
+  },
   className: "footnote-reference",
-  edit: EditFormatButton
+  edit: FootnoteFormatButton
 });
 })();
 

plugins/carhop-format-types/carhop-format-types.php

@@ -12,12 +12,19 @@ if (! defined('ABSPATH')) {
 }
 
 
-function carhop_format_types_enqueue_editor_assets()
+function carhop_format_types_enqueue_assets()
 {
-
 	$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
 	wp_enqueue_script('carhop-format-types-script', plugins_url('build/index.js', __FILE__), $asset_file['dependencies'], $asset_file['version']);
-	wp_enqueue_style('carhop-format-types-style', plugins_url('build/index.css', __FILE__));
+	wp_enqueue_style('carhop-format-types-style', plugins_url('build/index.css', __FILE__), array(), $asset_file['version']);
 }
 
-add_action('enqueue_block_editor_assets', 'carhop_format_types_enqueue_editor_assets');
+add_action('enqueue_block_editor_assets', 'carhop_format_types_enqueue_assets');
+
+
+
+function carhop_format_types_enqueue_front_assets()
+{
+	wp_enqueue_style('carhop-format-types-style', plugins_url('src/footnote.css', __FILE__));
+}
+add_action('wp_enqueue_scripts', 'carhop_format_types_enqueue_front_assets');

plugins/carhop-format-types/src/footnote.css

@@ -0,0 +1,57 @@
+body {
+	counter-reset: footnote-index;
+}
+.footnote-reference {
+	counter-increment: footnote-index;
+	position: relative;
+
+	&::after {
+		background-color: var(--wp--preset--color--primary);
+		color: #fff;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		content: counter(footnote-index);
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		font-weight: 600;
+		margin-left: 3px;
+		margin-right: 3px;
+	}
+}
+
+// Editor
+.footnote-reference {
+	.wp-block-post-content & {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-decoration-color: var(--wp--preset--color--primary);
+		text-decoration-thickness: 2px;
+		text-underline-offset: 2px;
+	}
+}
+
+.popover_footnote_field {
+	.components-popover__content {
+		padding: 10px !important;
+		min-width: 300px;
+	}
+	.popover_footnote_field_buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+		margin-top: 10px;
+
+		button.is-destructive {
+			background-color: #cc1818 !important;
+			color: #fff !important;
+		}
+
+		button.is-primary {
+			background-color: var(--wp--preset--color--primary) !important;
+			color: #fff !important;
+		}
+	}
+}

plugins/carhop-format-types/src/index.js

@@ -2,19 +2,24 @@ import { __ } from "@wordpress/i18n";
 import { registerFormatType, toggleFormat, applyFormat, getActiveFormats } from "@wordpress/rich-text";
 
 import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
-import { Popover, ToolbarGroup, ToolbarButton, TextControl } from "@wordpress/components";
+import { Popover, ToolbarGroup, ToolbarButton, TextControl, Button } from "@wordpress/components";
 import { trash, customPostType } from "@wordpress/icons";
 import { useState } from "@wordpress/element";
-import { useSelect } from "@wordpress/data"; // pour les querry
+
+import "./footnote.css";
 
 const formatName = "carhop-format/footnote";
 
-const EditFormatButton = (props) => {
+const FootnoteFormatButton = (props) => {
 	const { isActive, value, onChange } = props;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	// const [pendingDefinition, setPendingDefinition] = useState(false);
 
 	const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];
+	console.log(activeFormat);
+
+	function handleFootnoteContentChange(value) {
+		setFormat(value);
+	}
 
 	function removeFormat() {
 		setIsPopoverOpen(false);
@@ -24,15 +29,12 @@ const EditFormatButton = (props) => {
 			})
 		);
 	}
-	function setFormat(postDatas) {
+	function setFormat(footnoteContent) {
-		setIsPopoverOpen(false);
-
 		onChange(
 			applyFormat(value, {
 				type: formatName,
 				attributes: {
-					// definitionId: postDatas.id.toString(),
+					footnoteContent: footnoteContent,
-					// dataTooltipWord: postDatas.title,
 				},
 			})
 		);
@@ -44,40 +46,39 @@ const EditFormatButton = (props) => {
 				{isPopoverOpen && (
 					<Popover
 						onClose={() => setIsPopoverOpen(false)}
-						className='popover_tooltip_field'>
+						className='popover_footnote_field'>
 						<TextControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label='Note de bas de page'
-							value={value}
+							value={activeFormat?.attributes?.footnoteContent || ""}
-							onChange={(value) => setFormat(value)}
+							onChange={handleFootnoteContentChange}
 						/>
+						<div className='popover_footnote_field_buttons'>
+							<Button
+								variant='primary'
+								onClick={() => setIsPopoverOpen(false)}>
+								Ok
+							</Button>
+							<Button isDestructive onClick={() => removeFormat()}>
+								Supprimer
+							</Button>
+						</div>
 					</Popover>
 				)}
 
 				<ToolbarGroup>
 					<ToolbarButton
 						isActive={isActive}
-						icon={!isActive ? customPostType : "edit"}
+						icon={customPostType}
+						isPressed={isActive}
 						label={
 							!isActive
 								? "Ajouter une note de bas de page"
 								: "Éditer la note de bas de page"
 						}
-						onClick={() => {
+						onClick={() => setIsPopoverOpen(true)}
-							setFormat();
-							setIsPopoverOpen(true);
-						}}
 					/>
-					{isActive && (
-						<ToolbarButton
-							icon={trash}
-							label={"Supprimer la note de bas de page"}
-							onClick={() => {
-								removeFormat();
-							}}
-						/>
-					)}
 				</ToolbarGroup>
 			</BlockControls>
 		</>
@@ -86,7 +87,10 @@ const EditFormatButton = (props) => {
 
 registerFormatType(formatName, {
 	title: __("Notes de bas de page", "carhop-format-types"),
-	tagName: "span",
+	tagName: "button",
+	attributes: {
+		footnoteContent: "footnote-content",
+	},
 	className: "footnote-reference",
-	edit: EditFormatButton,
+	edit: FootnoteFormatButton,
 });