Merge pull request #304 from codesnippetspro/fix/tinymce-plugin-issue

fix: tinymce plugin issue

Author: louiswol94

.browserslistrc

@@ -69,6 +69,45 @@ command:
 npm run watch
 ```
 
+## Managing Composer dependencies
+
+Code Snippets uses the [Imposter plugin](https://github.com/TypistTech/imposter) to namespace-prefix all vendor
+dependencies under `Code_Snippets\Vendor\`. This prevents conflicts with other WordPress plugins that might use the
+same libraries (e.g., Guzzle, Minify, Monolog).
+
+### Adding a new dependency
+
+When adding a new Composer dependency that might exist in other plugins:
+
+1. Add the package to `src/composer.json` as usual:
+   ```shell
+   cd src
+   composer require vendor/package
+   ```
+
+2. Add corresponding PSR-4 autoload entries for the prefixed namespace in `src/composer.json`:
+   ```json
+   "autoload": {
+       "psr-4": {
+           "Code_Snippets\\Vendor\\OriginalVendor\\PackageName\\": "vendor/vendor-name/package-name/src/"
+       }
+   }
+   ```
+
+3. Run `composer dump-autoload -o` to regenerate autoload files.
+
+4. The Imposter plugin will automatically rewrite the namespaces during `post-install-cmd` and `post-update-cmd` hooks.
+
+5. Our autoloader in `src/php/load.php` automatically removes original (non-prefixed) namespace mappings to prevent
+   collisions, so no code changes are needed.
+
+### How it works
+
+- Imposter rewrites all vendor code from `Vendor\Package\Class` to `Code_Snippets\Vendor\Vendor\Package\Class`
+- The `load.php` file dynamically detects and removes original namespace PSR-4 mappings at runtime
+- Other plugins can load their own versions of the same libraries without conflicts
+- Your code should always use the prefixed namespace: `use Code_Snippets\Vendor\Vendor\Package\Class;`
+
 ## Preparing for release
 
 The plugin repository includes a number of files that are unnecessary when distributing the plugin files for

CONTRIBUTING.md

@@ -23,7 +23,9 @@
     "autoload": {
         "classmap": [
             "php/"
-        ]
+        ],
+        "psr-4": {
+        }
     },
     "require": {
         "php": ">=7.4",

src/composer.json

@@ -20,12 +20,12 @@
 	gap: 5px;
 	line-height: 1;
 
-  @at-root .row-actions & {
-    color: #8c8c8c;
-    padding-inline: 0px;
-    text-transform: capitalize;
-    font-weight: 500;
-  }
+	@at-root .row-actions & {
+		color: #8c8c8c;
+		padding-inline: 0;
+		text-transform: capitalize;
+		font-weight: 500;
+	}
 
 	.dashicons {
 		font-size: 18px;
@@ -37,7 +37,7 @@
 .network-shared {
 	color: #2271b1; 
 	font-size: 22px;
-	width: 100%;
+	inline-size: 100%;
 	cursor: help;
 }
 
@@ -89,9 +89,9 @@
 	background-color: #a7aaad;
 	border-color: #fff !important;
 
-  .dashicons {
-    color: #fff;
-  }
+	.dashicons {
+		color: #fff;
+	}
 }
 
 .nav-tab-inactive {

src/css/common/_badges.scss

@@ -95,3 +95,13 @@
 form.condition-snippet .snippet-code-container {
 	display: none;
 }
+
+.cs-back {
+	cursor: pointer;
+
+	&::before {
+		content: '<';
+		color: #2271b1;
+		margin-inline-end: 3px;
+	}
+}

src/css/edit.scss

@@ -20,30 +20,66 @@
 .generate-button {
 	display: flex;
 	align-items: center;
+	gap: 5px;
 
 	.dashicons-warning {
 		color: #b32d2e;
 	}
+
+	.snippet-tags-container &,
+	.snippet-description-container & {
+		float: inline-end;
+	}
 }
 
 .code-line-explanation {
 	display: flex;
-	align-items: center;
-	font-size: 13px;
+	cursor: default;
+	font-size: inherit;
 	margin: 0;
-	padding-block: 0;
-	padding-inline: 8px;
-	background-color: #fff;
-	border: 1px solid #bbb;
-	border-inline-start: 0;
-	border-inline-end: 0;
+	padding-inline: 6px;
+	border-inline-start: none;
+	border-inline-end: none;
+	border-block-start: 1px solid rgb(0 0 0 / 15%);
+	border-block-end: 1px solid rgb(0 0 0 / 15%);
+	border-image-slice: 1;
+	border-image-width: 1;
+	border-image-repeat: stretch;
 	color: #666;
 	font-style: italic;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+	font-family: monospace;
+	gap: 5px;
+	align-items: center;
 
 	img {
 		block-size: 1rem;
-		padding-inline-end: 5px;
+		opacity: 0.7;
+	}
+
+	.code-line-actions {
+		cursor: default;
+		gap: 7px;
+		display: inline-flex;
+		margin-inline-start: 5px;
+		font-family: system-ui;
+		font-style: normal;
+
+		.commit {
+			color: #3d9970;
+		}
+
+		.remove {
+			color: #b32d2e;
+		}
+
+		.action {
+			cursor: pointer;
+			opacity: 0.6;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
 	}
 }
 

src/css/edit/_gpt.scss

@@ -69,13 +69,6 @@ td.column-name {
 	}
 }
 
-td.column-download {
-	display: flex;
-	gap: 0.5em;
-	flex-flow: column;
-	text-align: center;
-}
-
 .cloud-snippet-download {
 	color: theme.$accent !important;
 }
@@ -218,12 +211,74 @@ td.column-download {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
+
+	.plugin-card {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		.cloud-meta-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-grow: 1;
+		}
+
+		.column-name {
+			display: flex;
+			justify-content: space-between;
+
+			h3 {
+				display: inline-flex;
+				flex-shrink: 1;
+			}
+
+			.title-icon {
+				block-size: 90px;
+				margin-block-start: -7px;
+			}
+		}
+
+		.column-votes {
+			display: inline-flex;
+			gap: 3px;
+
+			&:hover {
+				.thumbs-up {
+					stroke: #059669;
+					fill: #6ee7b7;
+					animation: thumb 1s ease-in-out infinite;
+				}
+			}
+
+			.num-votes {
+				display: inline-flex;
+				align-items: flex-end;
+			}
+		}
+	}
+
+	.action-buttons {
+		margin: 0;
+		align-items: flex-end;
+
+		.button {
+			inline-size: 100%;
+			text-align: center;
+		}
+	}
 }
 
-.cloud-snippets .plugin-card {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
+.cloud-snippets #the-list {
+	.column-download {
+		display: flex;
+		flex-flow: column;
+		text-align: end;
+    
+		li {
+			list-style: none;
+		}
+	}
 }
 
 .cloud-connect-wrap {
@@ -264,6 +319,7 @@ td.column-download {
 	background-color: #ce0000;
 	border-radius: 50%;
 
+
 	.cloud-connect-active & {
 		background-color: #25a349;
 	}
@@ -282,33 +338,16 @@ td.column-download {
 	block-size: 1.25rem; /* 20px */
 	transform-origin: bottom left;
 
-	[dir="rtl"] & {
-		transform-origin: bottom right;
-	}
-
 	&:hover {
 		stroke: #059669;
 		fill: #6ee7b7;
 	}
 }
 
-.voted-info {
-	display: inline-flex;
-	gap: 3px;
-	align-items: center;
-	margin-block-end: 6px !important;
-
-	&:hover {
-		.thumbs-up {
-			stroke: #059669;
-			fill: #6ee7b7;
-			animation: thumb 1s ease-in-out infinite;
-		}
-	}
-}
-
 .plugin-card-bottom {
 	overflow: visible !important;
+	display: flex;
+	align-items: center;
 }
 
 .beta-test-notice {
@@ -323,22 +362,22 @@ td.column-download {
 
 @keyframes thumb {
 	0% {
-		transform: rotate(0)
+		transform: rotate(0);
 	}
 
 	33% {
-		transform: rotate(calc(7deg * var(--cs-direction-multiplier)));
+		transform: rotate(7deg);
 	}
 
 	66% {
-		transform: rotate(calc(-15deg * var(--cs-direction-multiplier)));
+		transform: rotate(-15deg);
 	}
 
 	90% {
-		transform: rotate(calc(5deg * var(--cs-direction-multiplier)));
+		transform: rotate(5deg);
 	}
 
 	100% {
-		transform: rotate(0)
+		transform: rotate(0);
 	}
 }

src/css/manage/_cloud.scss

@@ -145,7 +145,7 @@ const EditFormWrap: React.FC = () => {
 
 	return (
 		<div className="wrap">
-			<p><small>
+			<p><small className="cs-back">
 				{isCondition(snippet)
 					? <a href={addQueryArgs(window.CODE_SNIPPETS?.urls.manage, { type: 'cond' })}>
 						{__('Back to all conditions', 'code-snippets')}