Add Edit in Playground

package.json

@@ -36,7 +36,7 @@
     "lint": "run-s prettier gts stylelint tsc",
     "lint:ci": "run-s prettier:ci gts:ci stylelint:ci tsc",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "checklinks:internal": "npx --yes --package=hyperlink -- 'hyperlink --canonicalroot https://sass-lang.com/ --root _site/ -r -p -i --skip \"fragment-redirect\" --skip \"types.Map\" _site/index.html'",
+    "checklinks:internal": "npx --yes --package=hyperlink -- 'hyperlink --canonicalroot https://sass-lang.com/ --root _site/ -r -p -i --skip \"fragment-redirect\" --skip \"types.Map\" --skip \"/playground#\" _site/index.html'",
     "checklinks:external": "npx --yes --package=broken-link-checker -- 'blc -ro --exclude=twitter.com --exclude=mvnrepository.com --exclude=drupal.org --exclude=web.archive.org https://sass-lang.com'"
   },
   "devDependencies": {

source/_includes/code_examples/code_example.liquid

@@ -1,24 +1,32 @@
-<div class="code-example ui-tabs{% if code.canSplit %} can-split{% endif %}"{% if code.splitLocation %} style="--split-location: {{ code.splitLocation }}%"{% endif %}>
-  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix">
+<div>
+  {%- if playgroundLinks.scss-%}
+    <a href="/playground#{{ playgroundLinks.scss }}" class="sl-c-to-playground" target="_blank" data-syntax="scss"><span class="sl-c-to-playground__highlight">Edit on</span> Playground</a>
+  {%- endif -%}
+  {%- if playgroundLinks.sass -%}
+    <a href="/playground#{{ playgroundLinks.sass }}" class="sl-c-to-playground" target="_blank" data-syntax="sass"><span class="sl-c-to-playground__highlight">Edit on</span> Playground</a>
+  {%- endif -%}
+  <div class="code-example ui-tabs{% if code.canSplit %} can-split{% endif %}"{% if code.splitLocation %} style="--split-location: {{ code.splitLocation }}%"{% endif %}>
+    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix">
+      {%- if code.scss.size -%}
+        {%- render 'code_examples/tab', name: 'SCSS', syntax: 'scss', id: exampleName, enabled: true -%}
+      {%- endif -%}
+      {%- if code.sass.size -%}
+        {%- assign enabled = code.scss.size == 0 -%}
+        {%- render 'code_examples/tab', name: 'Sass', syntax: 'sass', id: exampleName, enabled: enabled -%}
+      {%- endif -%}
+      {%- if code.css.size -%}
+        {%- render 'code_examples/tab', name: 'CSS', syntax: 'css', id: exampleName, enabled: false -%}
+      {%- endif -%}
+    </ul>
     {%- if code.scss.size -%}
-      {%- render 'code_examples/tab', name: 'SCSS', syntax: 'scss', id: exampleName, enabled: true -%}
+      {%- render 'code_examples/panel', name: 'SCSS Syntax', syntax: 'scss', id: exampleName, examples: code.scss, paddings: code.scssPaddings, enabled: true -%}
     {%- endif -%}
     {%- if code.sass.size -%}
       {%- assign enabled = code.scss.size == 0 -%}
-      {%- render 'code_examples/tab', name: 'Sass', syntax: 'sass', id: exampleName, enabled: enabled -%}
+      {%- render 'code_examples/panel', name: 'Sass Syntax', syntax: 'sass', id: exampleName, examples: code.sass, paddings: code.sassPaddings, enabled: enabled -%}
     {%- endif -%}
     {%- if code.css.size -%}
-      {%- render 'code_examples/tab', name: 'CSS', syntax: 'css', id: exampleName, enabled: false -%}
+      {%- render 'code_examples/panel', name: 'CSS Output', syntax: 'css', id: exampleName, examples: code.css, paddings: code.cssPaddings, enabled: false -%}
     {%- endif -%}
-  </ul>
-  {%- if code.scss.size -%}
-    {%- render 'code_examples/panel', name: 'SCSS Syntax', syntax: 'scss', id: exampleName, examples: code.scss, paddings: code.scssPaddings, enabled: true -%}
-  {%- endif -%}
-  {%- if code.sass.size -%}
-    {%- assign enabled = code.scss.size == 0 -%}
-    {%- render 'code_examples/panel', name: 'Sass Syntax', syntax: 'sass', id: exampleName, examples: code.sass, paddings: code.sassPaddings, enabled: enabled -%}
-  {%- endif -%}
-  {%- if code.css.size -%}
-    {%- render 'code_examples/panel', name: 'CSS Output', syntax: 'css', id: exampleName, examples: code.css, paddings: code.cssPaddings, enabled: false -%}
-  {%- endif -%}
+  </div>
 </div>

source/_includes/code_examples/tab.liquid

@@ -1,3 +1,3 @@
-<li class="ui-tabs-tab{% if syntax == 'css' %} css-tab{% endif %}{% if enabled %} ui-tabs-active{% endif %}">
+<li class="ui-tabs-tab{% if syntax == 'css' %} css-tab{% endif %}{% if enabled %} ui-tabs-active{% endif %}" data-syntax="{{ syntax }}">
   <a href="#example-{{ id }}-{{ syntax }}" class="ui-tabs-anchor">{{ name }}</a>
 </li>

source/assets/js/components/sass-syntax-switcher.ts

@@ -36,14 +36,18 @@ $(() => {
       if (!noRecursion) {
         noRecursion = true;
         jqASass.not(this).trigger('click');
+        $('body').attr('data-selected-syntax', 'sass');
         noRecursion = false;
       }
     }),
     jqASCSS = jqA.filter(":contains('SCSS')").on('click', function () {
       if (!noRecursion) {
         noRecursion = true;
         jqASCSS.not(this).trigger('click');
+        $('body').attr('data-selected-syntax', 'scss');
         noRecursion = false;
       }
     });
+    // Set initial value
+    $('body').attr('data-selected-syntax', 'scss');
 });

source/assets/js/playground/utils.ts

@@ -35,7 +35,9 @@ export function serializeState(state: PlaygroundState): string {
  * - `inputFormat`: 0=indented 1=scss
  * - `outputFormat`: 0=compressed 1=expanded
  */
-function serializeStateContents(state: PlaygroundState): string {
+export function serializeStateContents(
+  state: Pick<PlaygroundState, 'inputFormat' | 'outputFormat' | 'inputValue'>
+): string {
   const inputFormatChar = state.inputFormat === 'scss' ? 1 : 0;
   const outputFormatChar = state.outputFormat === 'expanded' ? 1 : 0;
   const persistedState = `${inputFormatChar}${outputFormatChar}${state.inputValue}`;

source/assets/sass/components/_playground.scss

@@ -331,3 +331,31 @@
     text-align: right;
   }
 }
+
+// Edit on Playground Link
+.sl-c-to-playground {
+  border: 0;
+  display: var(--to-playground-display, none);
+  float: inline-end;
+  font-size: var(--sl-font-size--small);
+  line-height: 1.2;
+  margin-block-start: var(--sl-gutter--quarter-negative);
+  padding: var(--sl-gutter--quarter);
+  text-align: end;
+  position: relative;
+  z-index: 1;
+}
+
+$syntaxes: ('scss', 'sass');
+
+@each $syntax in $syntaxes {
+  [data-selected-syntax='#{$syntax}']
+    .sl-c-to-playground[data-syntax='#{$syntax}'] {
+    --to-playground-display: grid;
+  }
+}
+
+.sl-c-to-playground__highlight {
+  font-weight: var(--sl-font-weight--bold);
+  text-transform: uppercase;
+}

source/helpers/components/codeExample.ts

@@ -2,6 +2,7 @@ import sass from 'sass';
 
 import {liquidEngine} from '../engines';
 import {stripIndent} from '../type';
+import {serializeStateContents} from '../../assets/js/playground/utils';
 
 /**
  * Renders a code example.
@@ -57,9 +58,14 @@ export default async function codeExample(
     throw new Error('`{% codeExample %}` tags require a unique name.');
   }
   const code = generateCodeExample(contents, autogenCSS, syntax);
+  const playgroundLinks = generatePlaygroundLinks({
+    scss: code.scss,
+    sass: code.sass,
+  });
   return liquidEngine.renderFile('code_examples/code_example', {
     code,
     exampleName,
+    playgroundLinks,
   });
 }
 
@@ -287,3 +293,34 @@ const getCanSplit = (
     maxCSSWidth,
   };
 };
+
+// Create links to editable example in the playground. Returns false for
+// multiple sections/files, which are not supported by the playground.
+function generatePlaygroundLinks({
+  scss,
+  sass,
+}: {
+  scss: string[];
+  sass: string[];
+}) {
+  const sassLink =
+    sass.length === 1
+      ? serializeStateContents({
+          inputFormat: 'indented',
+          outputFormat: 'expanded',
+          inputValue: sass[0],
+        })
+      : false;
+  const scssLink =
+    scss.length === 1
+      ? serializeStateContents({
+          inputFormat: 'scss',
+          outputFormat: 'expanded',
+          inputValue: scss[0],
+        })
+      : false;
+  return {
+    sass: sassLink,
+    scss: scssLink,
+  };
+}