Block Style Plugin

import { Editor, BlockStylePlugin } from 'on-codemerge';

const editor = new Editor(container, {
  plugins: [BlockStylePlugin()],
});

<!-- Styled paragraph -->
<p style="color: blue; font-size: 18px; text-align: center;">This is a styled paragraph</p>

<!-- Styled div with background -->
<div style="background-color: lightgray; padding: 20px; border: 2px solid black;">
  This div has custom styling
</div>

<!-- Block with custom class -->
<div class="custom-block">This block uses a CSS class</div>

<!-- Multiple classes -->
<p class="highlighted important">This paragraph has multiple classes</p>

<!-- Complex styled block -->
<section
  style="
  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
  border-radius: 10px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-left: 4px solid #007bff;
"
>
  <h2 style="color: #333; margin-bottom: 15px;">Styled Section</h2>
  <p style="line-height: 1.6; color: #666;">
    This section demonstrates complex styling capabilities.
  </p>
</section>

import React, { useEffect, useRef } from 'react';
import { Editor, BlockStylePlugin } from 'on-codemerge';

function MyEditor() {
  const editorRef = useRef(null);
  const editorInstance = useRef(null);

  useEffect(() => {
    if (editorRef.current && !editorInstance.current) {
      editorInstance.current = new Editor(editorRef.current);
      editorInstance.current.use(BlockStylePlugin());
    }

    return () => {
      if (editorInstance.current) {
        editorInstance.current.destroy();
      }
    };
  }, []);

  return <div ref={editorRef} className="editor-container" />;
}

<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>

<script>
import { Editor, BlockStylePlugin } from 'on-codemerge';

export default {
  name: 'MyEditor',
  mounted() {
    this.editor = new Editor(this.$refs.editorContainer);
    this./* use plugins: [BlockStylePlugin()] in Editor(...) */;
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  }
};
</script>

/* Block style editor popup */
.block-style-editor {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-width: 500px;
}

/* Style property selector */
.style-property {
  margin-bottom: 1rem;
}

.style-property label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #374151;
}

.style-property select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: white;
}

/* Value selector */
.style-value {
  margin-left: 1rem;
}

/* Class management */
.class-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.class-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.class-item:last-child {
  border-bottom: none;
}

/* Custom block themes */
.block-style-dark {
  background-color: #1f2937;
  color: #f9fafb;
}

.block-style-light {
  background-color: #ffffff;
  color: #374151;
}

/* Custom block indicators */
.block-indicator {
  position: relative;
}

.block-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #3b82f6;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.block-indicator:hover::before {
  opacity: 1;
}

/* Mobile-first block styles */
@media (max-width: 768px) {
  .block-style-editor {
    max-width: 100%;
    margin: 0 1rem;
  }

  .style-property {
    flex-direction: column;
  }

  .style-value {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* Tablet block styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .block-style-editor {
    max-width: 600px;
  }
}

// Add console logging
console.log('Block Style plugin initialized');

// Check block selection
editor.on('block:selected', (element) => {
  console.log('Block selected:', element.tagName, element);
});

// Check style application
editor.on('styles:applied', (styles) => {
  console.log('Styles applied:', styles);
});

// Check current block
const selectedBlock = blockStylePlugin.getSelectedElement();
console.log('Current selected block:', selectedBlock);