feat: integrate CKEditor layout plugins and add supporting import utilities

convert_tam_nhin.py

@@ -0,0 +1,167 @@
+import json
+import oracledb
+
+# Construct the Editor.js JSON structure using raw HTML blocks matching ckeditor5-layout schema
+json_data = {
+    "time": 1700000000000,
+    "blocks": [
+        {
+            "type": "stickyNav",
+            "data": {
+                "title": "Tầm nhìn - Sứ mệnh",
+                "bgColor": "#ffffff",
+                "items": [
+                    {"label": "Giới thiệu tổng quan", "link": "/page/gioi-thieu-tong-quan"},
+                    {"label": "Lịch sử hình thành", "link": "/page/lich-su-hinh-thanh"},
+                    {"label": "Tầm nhìn - Sứ mệnh - Giá trị cốt lõi", "link": "/page/tam-nhin-su-menh-gia-tri-cot-loi"},
+                    {"label": "Ban lãnh đạo", "link": "/page/doi-ngu-lanh-dao"},
+                    {"label": "Các đơn vị", "link": "/page/cac-don-vi"},
+                    {"label": "Thành tựu và giải thưởng", "link": "/page/thanh-tuu-va-giai-thuong"}
+                ]
+            }
+        },
+        {
+            "type": "raw",
+            "data": {
+                "html": """
+<section class="relative overflow-hidden xl:py-16 md:py-12 py-8">
+  <div class="absolute top-0 right-0 w-1/2 h-full bg-primary-100 -skew-x-12 translate-x-1/4 z-0 opacity-50 hidden lg:block"></div>
+  <div class="container relative z-10">
+    <div class="ck-layout-columns" columns="2">
+      <!-- Column 1 (Left): Text -->
+      <div>
+        <div class="relative">
+          <div class="absolute md:-left-4 -left-3 md:-top-5 -top-2 md:size-12 size-8 bg-primary-100 rounded-full"></div>
+          <h2 class="display-3 text-primary-500 uppercase mb-4 block z-[1] relative">TẦM NHÌN</h2>
+          <div class="flex flex-col space-y-4">
+            <div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
+              <p class="body-1 text-gray-800 text-justify !font-medium">Trở thành bệnh viện đại học dẫn đầu Việt Nam đạt chuẩn quốc tế</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Column 2 (Right): Image -->
+      <div>
+        <div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
+          <img alt="vision" src="/images/umass/mission.jpeg" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110" />
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+""",
+                "stretched": True
+            }
+        },
+        {
+            "type": "raw",
+            "data": {
+                "html": """
+<section class="xl:py-16 md:py-12 py-8 bg-primary-500 text-white overflow-hidden">
+  <div class="container">
+    <div class="ck-layout-columns" columns="2">
+      <!-- Column 1 (Left): Image -->
+      <div>
+        <div class="relative h-full">
+          <div class="relative rounded-lg overflow-hidden aspect-[3/2] shadow-lg">
+            <img alt="mission" src="/images/umass/vision.jpeg" class="w-full h-full object-cover" />
+          </div>
+        </div>
+      </div>
+      <!-- Column 2 (Right): Text -->
+      <div>
+        <div class="relative">
+          <div class="absolute md:-left-5 -left-4 md:-top-5 -top-2 md:size-12 size-8 bg-white/50 rounded-full"></div>
+          <h2 class="display-3 text-white mb-4 relative z-[1]">SỨ MỆNH</h2>
+        </div>
+        <div class="bg-white p-4 md:p-6 rounded-lg overview-wrapper-shadow">
+          <p class="body-1 text-primary-500 text-justify !font-medium">Mang đến giải pháp chăm sóc sức khỏe tối ưu từ sự tích hợp giữa điều trị, nghiên cứu và đào tạo</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+""",
+                "stretched": True
+            }
+        },
+        {
+            "type": "raw",
+            "data": {
+                "html": """
+<section class="bg-primary-75 py-12 overflow-hidden">
+  <div class="container">
+    <h2 class="text-center display-4 text-primary-600 xl:mb-6 md:mb-4 mb-3 uppercase">Giá trị cốt lõi</h2>
+    
+    <div class="ck-layout-columns" columns="4">
+      <!-- Column 1: Tiên phong -->
+      <div class="p-3">
+        <div class="rounded-lg shadow bg-primary-600 text-white p-4 h-full flex flex-col items-center text-center">
+          <div class="mb-3">
+            <img alt="Tiên phong" src="/images/career/core-hover-1.webp" style="width: 80px; height: 80px; object-fit: contain;" />
+          </div>
+          <h3 class="heading-1 font-weight-bold mb-2">Tiên phong</h3>
+          <p class="title-1">Phát triển và ứng dụng kỹ thuật tiên tiến vào điều trị, giảng dạy, nghiên cứu</p>
+        </div>
+      </div>
+      
+      <!-- Column 2: Thấu hiểu -->
+      <div class="p-3">
+        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
+          <div class="mb-3">
+            <img alt="Thấu hiểu" src="/images/career/core-2.webp" style="width: 80px; height: 80px; object-fit: contain;" />
+          </div>
+          <h3 class="heading-1 font-weight-bold mb-2">Thấu hiểu</h3>
+          <p class="title-1 text-gray-700">Nỗi đau thể xác và tinh thần của người bệnh để đưa ra giải pháp điều trị tối ưu</p>
+        </div>
+      </div>
+      
+      <!-- Column 3: Chuẩn mực -->
+      <div class="p-3">
+        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
+          <div class="mb-3">
+            <img alt="Chuẩn mực" src="/images/career/core-3.webp" style="width: 80px; height: 80px; object-fit: contain;" />
+          </div>
+          <h3 class="heading-1 font-weight-bold mb-2">Chuẩn mực</h3>
+          <p class="title-1 text-gray-700">Về y đức và học thuật của người thầy giáo – thầy thuốc</p>
+        </div>
+      </div>
+      
+      <!-- Column 4: An toàn -->
+      <div class="p-3">
+        <div class="rounded-lg shadow bg-white text-primary-600 p-4 h-full flex flex-col items-center text-center border border-primary-100">
+          <div class="mb-3">
+            <img alt="An toàn" src="/images/career/core-4.webp" style="width: 80px; height: 80px; object-fit: contain;" />
+          </div>
+          <h3 class="heading-1 font-weight-bold mb-2">An toàn</h3>
+          <p class="title-1 text-gray-700">Cho người bệnh, nhân viên y tế và cộng đồng</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+""",
+                "stretched": True
+            }
+        }
+    ],
+    "version": "2.30.8"
+}
+
+json_string = json.dumps(json_data, ensure_ascii=False, indent=2)
+
+with open("tam_nhin_su_menh_import.json", "w", encoding="utf-8") as f:
+    f.write(json_string)
+
+print("Generated tam_nhin_su_menh_import.json successfully!")
+
+# Automatically attempt to update local Oracle Database
+try:
+    conn = oracledb.connect(user='sisvietnam', password='sisvietnam', dsn='localhost:1521/sisvietnam')
+    cursor = conn.cursor()
+    cursor.execute("UPDATE sis_page SET content = :content WHERE slug = 'tam-nhin-su-menh-gia-tri-cot-loi'", content=json_string)
+    conn.commit()
+    print("Updated database table 'sis_page' for slug 'tam-nhin-su-menh-gia-tri-cot-loi' with layout JSON blocks!")
+    conn.close()
+except Exception as e:
+    print("DB Update bypassed or failed:", e)