feat: TinyMCE WYSIWYG editor styles

wp-content/themes/moonshine/app/assets/css/_main.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static) source("../../.."); 
 @import "@nuxt/ui";
 
 @import "./a11y.css";
@@ -6,3 +6,5 @@
 @import "./links.css";
 @import "./prose.css";
 @import "./typography.css";
+
+@import "./vendors/tinymce.css";

wp-content/themes/moonshine/app/assets/css/prose.css

@@ -9,7 +9,7 @@
   @apply links:link-underline;
 
   /* Paragraphs */
-  p:not([class*="paragraph-"]) { @apply paragraph-lg; }
+  p:not([class*="paragraph-"]) { @apply paragraph-base; }
 
   /* Spacing */
   @apply space-y-2;

wp-content/themes/moonshine/app/assets/css/typography.css

@@ -7,7 +7,4 @@
 
 /* Paragraph styles */
 @utility paragraph-base { @apply font-sans; }
-@utility paragraph-sm { @apply paragraph-base text-sm; }
-@utility paragraph-md { @apply paragraph-base text-base; }
-@utility paragraph-lg { @apply paragraph-base text-lg; }
-@utility paragraph-xl { @apply paragraph-base text-2xl; }
+@utility paragraph-lead { @apply paragraph-base text-2xl; }

wp-content/themes/moonshine/app/assets/css/vendors/tinymce.css

@@ -0,0 +1,3 @@
+body#tinymce {
+  @apply prose;
+}

wp-content/themes/moonshine/includes/vendors/tinymce.php

@@ -1,5 +1,121 @@
 <?php
 
+// Enable formats (styleselect) in TinyMCE
+add_filter( 'mce_buttons', 'moonshine_tinymce_styleselect' );
+function moonshine_tinymce_styleselect( $buttons ) {
+	array_unshift( $buttons, 'styleselect' );
+	return $buttons;
+}
+
+// Configure TinyMCE
+add_filter( 'tiny_mce_before_init', 'moonshine_tiny_mce_before_init' );
+function moonshine_tiny_mce_before_init( $settings ) {
+	// Reset TinyMCE editor CSS
+	if ( isset( $settings['content_css'] ) ) {
+		$content_css = explode( ',', $settings['content_css'] );
+		unset( $content_css[1] ); // wp-content.min.css
+		$settings['content_css'] = implode( ',', $content_css );
+	}
+
+	// Format styles
+	$settings['style_formats'] = wp_json_encode(
+		array(
+			array(
+				'title' => __( "Link styles", 'moonshine' ),
+				'items' => array(// Link styles
+					array(
+						'title'    => "Lien (opacité)",
+						'selector' => 'a',
+						'classes'  => 'link-opacity',
+					),
+				),
+			),
+			array(
+				'title' => __( "Inline styles", 'moonshine' ),
+				'items' => array(// Inline styles
+					array(
+						'title'   => __( "Semi-bold", 'moonshine' ),
+						'inline'  => 'span',
+						'classes' => 'font-semibold',
+					),
+				),
+			),
+			array(
+				'title' => __( "Paragraph styles", 'moonshine' ),
+				'items' => array(// Paragraph styles
+					array(
+						'title'   => "Paragraphe vedette",
+						'block'   => 'p',
+						'classes' => 'paragraph-lead',
+					),
+				),
+			),
+			array(
+				'title' => __( "Heading styles", 'moonshine' ),
+				'items' => array(// Heading styles
+					array(
+						'title'    => "Titre 1",
+						'selector' => 'h1,h2,h3,h4',
+						'classes'  => 'heading-1',
+					),
+					array(
+						'title'    => "Titre 2",
+						'selector' => 'h1,h2,h3,h4',
+						'classes'  => 'heading-2',
+					),
+					array(
+						'title'    => "Titre 3",
+						'selector' => 'h1,h2,h3,h4',
+						'classes'  => 'heading-3',
+					),
+					array(
+						'title'    => "Titre 4",
+						'selector' => 'h1,h2,h3,h4',
+						'classes'  => 'heading-4',
+					),
+				),
+			),
+		)
+	);
+
+	// Block styles
+	$settings['block_formats'] = implode(
+		';',
+		array(
+			'Paragraph=p',
+			'Heading 1=h1',
+			'Heading 2=h2',
+			'Heading 3=h3',
+			'Heading 4=h4',
+		)
+	);
+
+	return $settings;
+}
+
+// Override TinyMCE editor styles
+add_filter( 'mce_css', 'moonshine_override_editor_styles' );
+function moonshine_override_editor_styles() {
+	return get_stylesheet_directory_uri() . '/editor-style.css';
+}
+
+// Remove default TinyMCE styles for all editors (WordPress & ACF)
+add_action( 'admin_print_footer_scripts', 'moonshine_remove_tinymce_default_styles', 99 );
+function moonshine_remove_tinymce_default_styles() {
+	?>
+	<script>
+	(function($) {
+		if (typeof tinymce !== 'undefined') {
+			tinymce.on('AddEditor', function({editor}) {
+				editor.on('init', function() {
+					$(editor.iframeElement).contents().find("link[href*='content.min.css']").remove();
+				});
+			});
+		}
+	})(jQuery);
+	</script>
+	<?php
+}
 // Convert absolute URLs to relative in link query
 add_filter( 'wp_link_query', 'moonshine_tinymce_relative_urls' );
 function moonshine_tinymce_relative_urls( $results ) {

wp-content/themes/moonshine/nuxt.config.ts

@@ -1,5 +1,3 @@
-import { description } from "../../../composer.json";
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 
@@ -22,8 +20,8 @@ export default defineNuxtConfig({
   css: ["~/assets/css/_main.css"],
 
   site: {
-    name: description,
-    url: process.env.NUXT_SITE_URL || "https://wp-headless.ledevsimple.ca",
+    url: "https://wp-headless.ledevsimple.ca",
+    name: "WP Headless",
     defaultLocale: "fr",
   },
 
@@ -57,4 +55,8 @@ export default defineNuxtConfig({
     saveSdl: "server/graphql/schema.graphql",
   },
 
+  sitemap: {
+    zeroRuntime: true,
+  },
+
 });

wp-content/themes/moonshine/package.json

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
+    "editor-style": "pnpx @tailwindcss/cli -i ./app/assets/css/_main.css -o ./editor-style.css --minify",
     "dev": "nuxt dev",
     "lint": "eslint --fix .",
     "postinstall": "pnpm --sequential /postinstall:.*/",