{"id":903,"date":"2026-08-04T16:21:05","date_gmt":"2026-08-04T16:21:05","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=903"},"modified":"2026-08-04T17:24:47","modified_gmt":"2026-08-04T17:24:47","slug":"smart-text-formatter","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/smart-text-formatter\/","title":{"rendered":"Smart Text Formatter"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Smart Text Formatter &#038; Data Organizer Pro<\/title>\n<style>\n\/* Scoped Wrapper & Design System *\/\n.stf-wrapper {\n  all: initial;\n  display: flex;\n  flex-direction: column;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--stf-text, #1e293b);\n  background-color: var(--stf-bg, #f8fafc);\n  box-sizing: border-box;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  z-index: 999999;\n  --stf-primary: #2563eb;\n  --stf-primary-hover: #1d4ed8;\n  --stf-primary-light: #eff6ff;\n  --stf-bg: #f8fafc;\n  --stf-surface: #ffffff;\n  --stf-surface-alt: #f1f5f9;\n  --stf-border: #cbd5e1;\n  --stf-border-light: #e2e8f0;\n  --stf-text: #0f172a;\n  --stf-text-muted: #64748b;\n  --stf-radius: 8px;\n  --stf-radius-sm: 4px;\n  --stf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  --stf-transition: all 0.2s ease;\n}\n\n.stf-wrapper *, .stf-wrapper *::before, .stf-wrapper *::after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n.stf-wrapper[data-theme=\"dark\"] {\n  --stf-bg: #0f172a;\n  --stf-surface: #1e293b;\n  --stf-surface-alt: #0f172a;\n  --stf-border: #334155;\n  --stf-border-light: #1e293b;\n  --stf-text: #f8fafc;\n  --stf-text-muted: #94a3b8;\n  --stf-primary: #3b82f6;\n  --stf-primary-hover: #2563eb;\n  --stf-primary-light: rgba(59, 130, 246, 0.15);\n}\n\n.stf-wrapper[data-theme=\"sepia\"] {\n  --stf-bg: #fbf0d9;\n  --stf-surface: #f4ecd8;\n  --stf-surface-alt: #e6dcbe;\n  --stf-border: #d4c5a9;\n  --stf-border-light: #e6dcbe;\n  --stf-text: #433422;\n  --stf-text-muted: #796649;\n  --stf-primary: #8c6239;\n  --stf-primary-hover: #6e4c2b;\n  --stf-primary-light: rgba(140, 98, 57, 0.15);\n}\n\n.stf-wrapper[data-theme=\"high-contrast\"] {\n  --stf-bg: #000000;\n  --stf-surface: #000000;\n  --stf-surface-alt: #1a1a1a;\n  --stf-border: #ffffff;\n  --stf-border-light: #666666;\n  --stf-text: #ffffff;\n  --stf-text-muted: #ffff00;\n  --stf-primary: #00ffff;\n  --stf-primary-hover: #ffffff;\n  --stf-primary-light: rgba(0, 255, 255, 0.2);\n}\n\n\/* App Layout *\/\n.stf-app {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--stf-bg);\n  color: var(--stf-text);\n  overflow: hidden;\n}\n\n.stf-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background: var(--stf-surface);\n  border-bottom: 1px solid var(--stf-border);\n  height: 50px;\n  min-height: 50px;\n  z-index: 20;\n}\n\n.stf-brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 700;\n  font-size: 16px;\n  color: var(--stf-primary);\n}\n\n.stf-brand svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n}\n\n.stf-nav-tabs {\n  display: flex;\n  gap: 4px;\n  overflow-x: auto;\n  max-width: 40%;\n  scrollbar-width: none;\n}\n.stf-nav-tabs::-webkit-scrollbar { display: none; }\n\n.stf-tab {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--stf-surface-alt);\n  border: 1px solid var(--stf-border-light);\n  border-radius: var(--stf-radius-sm);\n  font-size: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  color: var(--stf-text-muted);\n  transition: var(--stf-transition);\n}\n\n.stf-tab.active {\n  background: var(--stf-primary-light);\n  border-color: var(--stf-primary);\n  color: var(--stf-primary);\n  font-weight: 600;\n}\n\n.stf-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\/* Toolbar *\/\n.stf-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 6px 12px;\n  background: var(--stf-surface);\n  border-bottom: 1px solid var(--stf-border);\n  z-index: 10;\n  align-items: center;\n  max-height: 110px;\n  overflow-y: auto;\n}\n\n.stf-tool-group {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  border-right: 1px solid var(--stf-border-light);\n  padding-right: 6px;\n  margin-right: 6px;\n}\n\n.stf-tool-group:last-child {\n  border-right: none;\n  margin-right: 0;\n  padding-right: 0;\n}\n\n.stf-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--stf-radius-sm);\n  color: var(--stf-text);\n  font-size: 12px;\n  cursor: pointer;\n  transition: var(--stf-transition);\n  white-space: nowrap;\n}\n\n.stf-btn:hover {\n  background: var(--stf-surface-alt);\n  border-color: var(--stf-border-light);\n}\n\n.stf-btn.active, .stf-btn:active {\n  background: var(--stf-primary-light);\n  color: var(--stf-primary);\n  border-color: var(--stf-primary);\n}\n\n.stf-btn svg {\n  width: 14px;\n  height: 14px;\n  fill: currentColor;\n}\n\n.stf-select {\n  padding: 4px 8px;\n  background: var(--stf-surface);\n  border: 1px solid var(--stf-border);\n  border-radius: var(--stf-radius-sm);\n  color: var(--stf-text);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n}\n\n.stf-select:focus {\n  border-color: var(--stf-primary);\n}\n\n\/* Workspace *\/\n.stf-workspace {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.stf-sidebar {\n  width: 280px;\n  background: var(--stf-surface);\n  border-right: 1px solid var(--stf-border);\n  display: flex;\n  flex-direction: column;\n  transition: width 0.3s ease;\n  z-index: 15;\n  flex-shrink: 0;\n}\n\n.stf-sidebar.collapsed {\n  width: 0px;\n  overflow: hidden;\n  border-right: none;\n}\n\n.stf-sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--stf-border-light);\n  font-weight: 600;\n  font-size: 13px;\n}\n\n.stf-sidebar-tabs {\n  display: flex;\n  background: var(--stf-surface-alt);\n  border-bottom: 1px solid var(--stf-border-light);\n  overflow-x: auto;\n}\n\n.stf-sidebar-tab {\n  flex: 1;\n  padding: 8px 4px;\n  text-align: center;\n  font-size: 11px;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  color: var(--stf-text-muted);\n  white-space: nowrap;\n}\n\n.stf-sidebar-tab.active {\n  color: var(--stf-primary);\n  border-bottom-color: var(--stf-primary);\n  background: var(--stf-surface);\n  font-weight: 600;\n}\n\n.stf-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.stf-pane {\n  display: none;\n}\n\n.stf-pane.active {\n  display: block;\n}\n\n\/* Editor & Preview *\/\n.stf-main-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--stf-bg);\n}\n\n.stf-editor-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  background: var(--stf-surface);\n  margin: 12px;\n  border-radius: var(--stf-radius);\n  border: 1px solid var(--stf-border);\n  box-shadow: var(--stf-shadow);\n}\n\n.stf-editor-area {\n  flex: 1;\n  padding: 24px;\n  overflow-y: auto;\n  outline: none;\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--stf-text);\n  word-break: break-word;\n}\n\n.stf-preview-area {\n  flex: 1;\n  display: none;\n  padding: 24px;\n  overflow-y: auto;\n  background: var(--stf-surface);\n  margin: 12px 12px 12px 0;\n  border-radius: var(--stf-radius);\n  border: 1px solid var(--stf-border);\n  box-shadow: var(--stf-shadow);\n}\n\n.stf-preview-area.active {\n  display: block;\n}\n\n\/* Status Bar *\/\n.stf-statusbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px;\n  background: var(--stf-surface);\n  border-top: 1px solid var(--stf-border);\n  font-size: 11px;\n  color: var(--stf-text-muted);\n  height: 28px;\n  min-height: 28px;\n  z-index: 20;\n}\n\n.stf-status-group {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n\/* Modals *\/\n.stf-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n.stf-modal-backdrop.open {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.stf-modal {\n  background: var(--stf-surface);\n  border: 1px solid var(--stf-border);\n  border-radius: var(--stf-radius);\n  width: 90%;\n  max-width: 500px;\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);\n  transform: scale(0.95);\n  transition: transform 0.2s ease;\n}\n\n.stf-modal-backdrop.open .stf-modal {\n  transform: scale(1);\n}\n\n.stf-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--stf-border-light);\n  font-weight: 600;\n}\n\n.stf-modal-body {\n  padding: 16px;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.stf-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid var(--stf-border-light);\n}\n\n\/* Notifications *\/\n.stf-notifications {\n  position: fixed;\n  bottom: 40px;\n  right: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  z-index: 2000;\n  pointer-events: none;\n}\n\n.stf-notification {\n  background: var(--stf-surface);\n  border: 1px solid var(--stf-border);\n  border-left: 4px solid var(--stf-primary);\n  padding: 10px 14px;\n  border-radius: var(--stf-radius-sm);\n  box-shadow: var(--stf-shadow);\n  font-size: 12px;\n  color: var(--stf-text);\n  pointer-events: auto;\n  animation: stfSlideIn 0.3s ease forwards;\n  max-width: 300px;\n}\n\n@keyframes stfSlideIn {\n  from { transform: translateX(100%); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}\n\n\/* Input Controls *\/\n.stf-input {\n  width: 100%;\n  padding: 8px 12px;\n  background: var(--stf-surface);\n  border: 1px solid var(--stf-border);\n  border-radius: var(--stf-radius-sm);\n  color: var(--stf-text);\n  font-size: 12px;\n  outline: none;\n  margin-bottom: 10px;\n}\n.stf-input:focus { border-color: var(--stf-primary); }\n\n.stf-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  margin-bottom: 4px;\n  color: var(--stf-text-muted);\n}\n\n\/* Editor Elements styling *\/\n.stf-wrapper table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 12px 0;\n}\n.stf-wrapper th, .stf-wrapper td {\n  border: 1px solid var(--stf-border);\n  padding: 8px 12px;\n  text-align: left;\n}\n.stf-wrapper th {\n  background: var(--stf-surface-alt);\n}\n.stf-wrapper blockquote {\n  border-left: 4px solid var(--stf-primary);\n  padding-left: 12px;\n  margin: 12px 0;\n  color: var(--stf-text-muted);\n  font-style: italic;\n}\n.stf-wrapper code {\n  background: var(--stf-surface-alt);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-family: monospace;\n  font-size: 0.9em;\n}\n.stf-wrapper pre {\n  background: var(--stf-surface-alt);\n  padding: 12px;\n  border-radius: var(--stf-radius-sm);\n  overflow-x: auto;\n  margin: 12px 0;\n}\n.stf-wrapper pre code {\n  background: none;\n  padding: 0;\n}\n\n.stf-wrapper.focus-mode .stf-sidebar,\n.stf-wrapper.focus-mode .stf-toolbar,\n.stf-wrapper.focus-mode .stf-header {\n  display: none !important;\n}\n.stf-wrapper.focus-mode .stf-editor-container {\n  max-width: 800px;\n  margin: 40px auto;\n  height: calc(100vh - 80px);\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"stf-wrapper\" id=\"stfAppWrapper\" data-theme=\"light\">\n  <div class=\"stf-app\">\n    \n    <!-- Header -->\n    <header class=\"stf-header\">\n      <div class=\"stf-brand\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v2H4zm0 6h16v2H4zm0 6h10v2H4z\"\/><\/svg>\n        <span>Smart Formatter Pro<\/span>\n      <\/div>\n      <div class=\"stf-nav-tabs\" id=\"stfTabsContainer\"><\/div>\n      <div class=\"stf-header-actions\">\n        <button class=\"stf-btn\" id=\"stfNewDocBtn\" title=\"New Document\">New<\/button>\n        <button class=\"stf-btn\" id=\"stfToggleSidebar\" title=\"Toggle Sidebar\">Sidebar<\/button>\n      <\/div>\n    <\/header>\n\n    <!-- Toolbar -->\n    <div class=\"stf-toolbar\" id=\"stfToolbar\">\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" data-action=\"undo\" title=\"Undo\">Undo<\/button>\n        <button class=\"stf-btn\" data-action=\"redo\" title=\"Redo\">Redo<\/button>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <select class=\"stf-select\" id=\"stfHeadingSelect\">\n          <option value=\"p\">Paragraph<\/option>\n          <option value=\"h1\">Heading 1<\/option>\n          <option value=\"h2\">Heading 2<\/option>\n          <option value=\"h3\">Heading 3<\/option>\n          <option value=\"h4\">Heading 4<\/option>\n          <option value=\"h5\">Heading 5<\/option>\n          <option value=\"h6\">Heading 6<\/option>\n        <\/select>\n        <select class=\"stf-select\" id=\"stfFontFamilySelect\">\n          <option value=\"sans\">System Sans<\/option>\n          <option value=\"serif\">System Serif<\/option>\n          <option value=\"mono\">Monospace<\/option>\n        <\/select>\n        <select class=\"stf-select\" id=\"stfFontSizeSelect\">\n          <option value=\"12px\">12px<\/option>\n          <option value=\"15px\" selected>15px<\/option>\n          <option value=\"18px\">18px<\/option>\n          <option value=\"22px\">22px<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" data-cmd=\"bold\" title=\"Bold\"><b>B<\/b><\/button>\n        <button class=\"stf-btn\" data-cmd=\"italic\" title=\"Italic\"><i>I<\/i><\/button>\n        <button class=\"stf-btn\" data-cmd=\"underline\" title=\"Underline\"><u>U<\/u><\/button>\n        <button class=\"stf-btn\" data-cmd=\"strikeThrough\" title=\"Strike\"><s>S<\/s><\/button>\n        <button class=\"stf-btn\" data-cmd=\"superscript\" title=\"Superscript\">X\u00b2<\/button>\n        <button class=\"stf-btn\" data-cmd=\"subscript\" title=\"Subscript\">X\u2082<\/button>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <input type=\"color\" id=\"stfTextColorPicker\" title=\"Text Color\" value=\"#0f172a\" style=\"width:24px;height:24px;border:none;background:none;cursor:pointer;\">\n        <input type=\"color\" id=\"stfBgColorPicker\" title=\"Highlight Color\" value=\"#fef08a\" style=\"width:24px;height:24px;border:none;background:none;cursor:pointer;\">\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" data-cmd=\"justifyLeft\" title=\"Align Left\">Left<\/button>\n        <button class=\"stf-btn\" data-cmd=\"justifyCenter\" title=\"Align Center\">Center<\/button>\n        <button class=\"stf-btn\" data-cmd=\"justifyRight\" title=\"Align Right\">Right<\/button>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" data-cmd=\"insertUnorderedList\" title=\"Bullets\">\u2022 List<\/button>\n        <button class=\"stf-btn\" data-cmd=\"insertOrderedList\" title=\"Numbers\">1. List<\/button>\n        <button class=\"stf-btn\" data-action=\"checklist\" title=\"Checklist\">\u2611 Check<\/button>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" data-action=\"insertTable\" title=\"Table\">Table<\/button>\n        <button class=\"stf-btn\" data-action=\"insertQuote\" title=\"Quote\">Quote<\/button>\n        <button class=\"stf-btn\" data-action=\"insertCodeBlock\" title=\"Code\">&lt;\/&gt;<\/button>\n        <button class=\"stf-btn\" data-action=\"insertHR\" title=\"Line\">HR<\/button>\n      <\/div>\n\n      <div class=\"stf-tool-group\">\n        <button class=\"stf-btn\" id=\"stfAutoFormatBtn\" title=\"Smart Format\">\u2728 Smart Format<\/button>\n        <button class=\"stf-btn\" id=\"stfCommandPaletteBtn\" title=\"Command Palette\">\u2318 Command<\/button>\n        <button class=\"stf-btn\" id=\"stfFocusModeBtn\" title=\"Focus Mode\">Focus<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Workspace -->\n    <div class=\"stf-workspace\">\n      \n      <!-- Sidebar -->\n      <div class=\"stf-sidebar\" id=\"stfSidebar\">\n        <div class=\"stf-sidebar-header\">\n          <span>Workspace Tools<\/span>\n          <button class=\"stf-btn\" id=\"stfCloseSidebar\">\u2715<\/button>\n        <\/div>\n        <div class=\"stf-sidebar-tabs\">\n          <div class=\"stf-sidebar-tab active\" data-pane=\"smart\">Smart<\/div>\n          <div class=\"stf-sidebar-tab\" data-pane=\"outline\">Outline<\/div>\n          <div class=\"stf-sidebar-tab\" data-pane=\"tools\">Tools<\/div>\n          <div class=\"stf-sidebar-tab\" data-pane=\"export\">Export<\/div>\n          <div class=\"stf-sidebar-tab\" data-pane=\"settings\">Settings<\/div>\n        <\/div>\n        <div class=\"stf-sidebar-content\">\n          \n          <!-- Smart Pane -->\n          <div class=\"stf-pane active\" id=\"stfPaneSmart\">\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfActionAutoOrganize\">Auto Format All<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfActionCleanSpaces\">Clean Spaces &#038; Lines<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfActionDetectTables\">Detect Tables from CSV<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfActionExtractEntities\">Extract Entities<\/button>\n            \n            <div style=\"margin-top:16px; font-weight:600; margin-bottom:6px;\">Live Statistics<\/div>\n            <div id=\"stfInsightsBox\" style=\"font-size:11px; background:var(--stf-surface-alt); padding:8px; border-radius:var(--stf-radius-sm);\">\n              <div>Words: <span id=\"stfStatWords\">0<\/span><\/div>\n              <div>Characters: <span id=\"stfStatChars\">0<\/span><\/div>\n              <div>Read Time: <span id=\"stfStatTime\">0 min<\/span><\/div>\n              <div>Reading Level: <span id=\"stfStatLevel\">Standard<\/span><\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Outline Pane -->\n          <div class=\"stf-pane\" id=\"stfPaneOutline\">\n            <div id=\"stfOutlineList\" style=\"font-size:12px; color:var(--stf-text-muted);\">No headings detected.<\/div>\n          <\/div>\n\n          <!-- Tools Pane -->\n          <div class=\"stf-pane\" id=\"stfPaneTools\">\n            <input type=\"text\" class=\"stf-input\" id=\"stfFindInput\" placeholder=\"Find text...\">\n            <input type=\"text\" class=\"stf-input\" id=\"stfReplaceInput\" placeholder=\"Replace with...\">\n            <div style=\"display:flex; gap:6px; margin-bottom:12px;\">\n              <button class=\"stf-btn\" id=\"stfFindBtn\" style=\"flex:1; justify-content:center;\">Find<\/button>\n              <button class=\"stf-btn\" id=\"stfReplaceBtn\" style=\"flex:1; justify-content:center;\">Replace All<\/button>\n            <\/div>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfToolSummary\">Generate Summary<\/button>\n          <\/div>\n\n          <!-- Export Pane -->\n          <div class=\"stf-pane\" id=\"stfPaneExport\">\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfExportTxt\">Export TXT<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfExportHtml\">Export HTML<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfExportMd\">Export Markdown<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfExportJson\">Export JSON<\/button>\n            <button class=\"stf-btn\" style=\"width:100%; justify-content:center; margin-bottom:6px;\" id=\"stfExportPrint\">Print \/ PDF<\/button>\n          <\/div>\n\n          <!-- Settings Pane -->\n          <div class=\"stf-pane\" id=\"stfPaneSettings\">\n            <label class=\"stf-label\">Theme<\/label>\n            <select class=\"stf-select\" id=\"stfThemeSelect\" style=\"width:100%; margin-bottom:10px;\">\n              <option value=\"light\">Light Mode<\/option>\n              <option value=\"dark\">Dark Mode<\/option>\n              <option value=\"sepia\">Sepia Mode<\/option>\n              <option value=\"high-contrast\">High Contrast<\/option>\n            <\/select>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n      <!-- Editor & Preview -->\n      <div class=\"stf-main-content\">\n        <div class=\"stf-editor-container\">\n          <div class=\"stf-editor-area\" id=\"stfEditor\" contenteditable=\"true\" placeholder=\"Paste your messy text here or start typing...\"><\/div>\n        <\/div>\n        <div class=\"stf-preview-area\" id=\"stfPreview\"><\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- Status Bar -->\n    <footer class=\"stf-statusbar\">\n      <div class=\"stf-status-group\">\n        <span id=\"stfStatusBarWords\">0 words<\/span>\n        <span id=\"stfStatusBarChars\">0 chars<\/span>\n        <span id=\"stfStatusBarCursor\">Ready<\/span>\n      <\/div>\n      <div class=\"stf-status-group\">\n        <span id=\"stfStatusBarSave\">All changes saved<\/span>\n        <button class=\"stf-btn\" id=\"stfTogglePreview\" style=\"padding:2px 6px; font-size:10px;\">Preview<\/button>\n      <\/div>\n    <\/footer>\n\n  <\/div>\n\n  <!-- Command Palette Modal -->\n  <div class=\"stf-modal-backdrop\" id=\"stfModalPalette\">\n    <div class=\"stf-modal\" style=\"max-width:400px;\">\n      <div class=\"stf-modal-header\">\n        <span>Command Palette<\/span>\n        <button class=\"stf-btn\" id=\"stfCloseModal\">\u2715<\/button>\n      <\/div>\n      <div class=\"stf-modal-body\">\n        <input type=\"text\" class=\"stf-input\" id=\"stfCommandSearch\" placeholder=\"Type a command...\">\n        <div id=\"stfCommandList\" style=\"max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"stf-notifications\" id=\"stfNotifications\"><\/div>\n<\/div>\n\n<script>\n(function() {\n  'use strict';\n\n  const state = {\n    documents: [{ id: 'doc-1', title: 'Untitled Document', content: '' }],\n    activeDocId: 'doc-1',\n    theme: 'light',\n    sidebarOpen: true,\n    previewActive: false\n  };\n\n  const wrapper = document.getElementById('stfAppWrapper');\n  const editor = document.getElementById('stfEditor');\n  const preview = document.getElementById('stfPreview');\n  const sidebar = document.getElementById('stfSidebar');\n  const tabsContainer = document.getElementById('stfTabsContainer');\n  const notificationsContainer = document.getElementById('stfNotifications');\n\n  function init() {\n    loadLocalStorage();\n    renderTabs();\n    loadActiveDoc();\n    setupListeners();\n    updateStats();\n    populateCommandPalette();\n    setInterval(autoSave, 5000);\n  }\n\n  function loadLocalStorage() {\n    try {\n      const saved = localStorage.getItem('stf_pro_state');\n      if (saved) {\n        const parsed = JSON.parse(saved);\n        if (parsed.documents) state.documents = parsed.documents;\n        if (parsed.activeDocId) state.activeDocId = parsed.activeDocId;\n        if (parsed.theme) {\n          state.theme = parsed.theme;\n          wrapper.setAttribute('data-theme', state.theme);\n          document.getElementById('stfThemeSelect').value = state.theme;\n        }\n      }\n    } catch(e) {}\n  }\n\n  function saveLocalStorage() {\n    try {\n      localStorage.setItem('stf_pro_state', JSON.stringify({\n        documents: state.documents,\n        activeDocId: state.activeDocId,\n        theme: state.theme\n      }));\n      document.getElementById('stfStatusBarSave').textContent = 'Saved';\n    } catch(e) {}\n  }\n\n  function autoSave() {\n    saveCurrentDoc();\n    saveLocalStorage();\n  }\n\n  function notify(msg) {\n    const div = document.createElement('div');\n    div.className = 'stf-notification';\n    div.textContent = msg;\n    notificationsContainer.appendChild(div);\n    setTimeout(() => div.remove(), 3000);\n  }\n\n  function renderTabs() {\n    tabsContainer.innerHTML = '';\n    state.documents.forEach(doc => {\n      const btn = document.createElement('div');\n      btn.className = `stf-tab ${doc.id === state.activeDocId ? 'active' : ''}`;\n      btn.textContent = doc.title;\n      btn.addEventListener('click', () => switchDoc(doc.id));\n      tabsContainer.appendChild(btn);\n    });\n  }\n\n  function loadActiveDoc() {\n    const doc = state.documents.find(d => d.id === state.activeDocId);\n    if (doc) {\n      editor.innerHTML = doc.content;\n      updateStats();\n      updateOutline();\n    }\n  }\n\n  function switchDoc(id) {\n    saveCurrentDoc();\n    state.activeDocId = id;\n    renderTabs();\n    loadActiveDoc();\n  }\n\n  function saveCurrentDoc() {\n    const doc = state.documents.find(d => d.id === state.activeDocId);\n    if (doc) {\n      doc.content = editor.innerHTML;\n    }\n  }\n\n  function setupListeners() {\n    editor.addEventListener('input', () => {\n      saveCurrentDoc();\n      updateStats();\n      updateOutline();\n      if (state.previewActive) updatePreview();\n    });\n\n    document.getElementById('stfToggleSidebar').addEventListener('click', () => {\n      sidebar.classList.toggle('collapsed');\n    });\n    document.getElementById('stfCloseSidebar').addEventListener('click', () => {\n      sidebar.classList.add('collapsed');\n    });\n\n    document.querySelectorAll('.stf-sidebar-tab').forEach(tab => {\n      tab.addEventListener('click', (e) => {\n        document.querySelectorAll('.stf-sidebar-tab').forEach(t => t.classList.remove('active'));\n        document.querySelectorAll('.stf-pane').forEach(p => p.classList.remove('active'));\n        e.target.classList.add('active');\n        document.getElementById('stfPane' + e.target.getAttribute('data-pane').charAt(0).toUpperCase() + e.target.getAttribute('data-pane').slice(1)).classList.add('active');\n      });\n    });\n\n    document.querySelectorAll('[data-cmd]').forEach(btn => {\n      btn.addEventListener('click', () => {\n        document.execCommand(btn.getAttribute('data-cmd'), false, null);\n        editor.focus();\n        updateStats();\n      });\n    });\n\n    document.querySelectorAll('[data-action]').forEach(btn => {\n      btn.addEventListener('click', () => handleAction(btn.getAttribute('data-action')));\n    });\n\n    document.getElementById('stfHeadingSelect').addEventListener('change', (e) => {\n      const val = e.target.value;\n      document.execCommand('formatBlock', false, val === 'p' ? '<p>' : `<${val}>`);\n      editor.focus();\n    });\n\n    document.getElementById('stfFontFamilySelect').addEventListener('change', (e) => {\n      const map = { 'sans': 'system-ui', 'serif': 'Georgia', 'mono': 'monospace' };\n      editor.style.fontFamily = map[e.target.value] || 'system-ui';\n    });\n\n    document.getElementById('stfFontSizeSelect').addEventListener('change', (e) => {\n      editor.style.fontSize = e.target.value;\n    });\n\n    document.getElementById('stfTextColorPicker').addEventListener('input', (e) => {\n      document.execCommand('foreColor', false, e.target.value);\n    });\n\n    document.getElementById('stfBgColorPicker').addEventListener('input', (e) => {\n      document.execCommand('hiliteColor', false, e.target.value);\n    });\n\n    document.getElementById('stfFocusModeBtn').addEventListener('click', () => {\n      wrapper.classList.toggle('focus-mode');\n      notify(wrapper.classList.contains('focus-mode') ? 'Focus Mode ON' : 'Focus Mode OFF');\n    });\n\n    document.getElementById('stfTogglePreview').addEventListener('click', () => {\n      state.previewActive = !state.previewActive;\n      preview.classList.toggle('active', state.previewActive);\n      if (state.previewActive) updatePreview();\n    });\n\n    document.getElementById('stfThemeSelect').addEventListener('change', (e) => {\n      state.theme = e.target.value;\n      wrapper.setAttribute('data-theme', state.theme);\n      saveLocalStorage();\n    });\n\n    document.getElementById('stfNewDocBtn').addEventListener('click', () => {\n      const newId = 'doc-' + Date.now();\n      state.documents.push({ id: newId, title: 'Document ' + (state.documents.length + 1), content: '' });\n      switchDoc(newId);\n      notify('New document created');\n    });\n\n    document.getElementById('stfAutoFormatBtn').addEventListener('click', smartAutoFormat);\n    document.getElementById('stfActionAutoOrganize').addEventListener('click', smartAutoFormat);\n    document.getElementById('stfActionCleanSpaces').addEventListener('click', cleanSpaces);\n    document.getElementById('stfActionDetectTables').addEventListener('click', detectTables);\n    document.getElementById('stfActionExtractEntities').addEventListener('click', extractEntities);\n\n    document.getElementById('stfToolSummary').addEventListener('click', generateSummary);\n    document.getElementById('stfFindBtn').addEventListener('click', findText);\n    document.getElementById('stfReplaceBtn').addEventListener('click', replaceText);\n\n    document.getElementById('stfExportTxt').addEventListener('click', () => exportFile('txt'));\n    document.getElementById('stfExportHtml').addEventListener('click', () => exportFile('html'));\n    document.getElementById('stfExportMd').addEventListener('click', () => exportFile('md'));\n    document.getElementById('stfExportJson').addEventListener('click', () => exportFile('json'));\n    document.getElementById('stfExportPrint').addEventListener('click', () => window.print());\n\n    const modal = document.getElementById('stfModalPalette');\n    document.getElementById('stfCommandPaletteBtn').addEventListener('click', () => modal.classList.add('open'));\n    document.getElementById('stfCloseModal').addEventListener('click', () => modal.classList.remove('open'));\n\n    document.addEventListener('keydown', (e) => {\n      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {\n        e.preventDefault();\n        modal.classList.toggle('open');\n      }\n      if ((e.ctrlKey || e.metaKey) && e.key === 's') {\n        e.preventDefault();\n        autoSave();\n        notify('Saved successfully');\n      }\n    });\n  }\n\n  function handleAction(action) {\n    if (action === 'insertTable') {\n      document.execCommand('insertHTML', false, '<table><tr><th>Header 1<\/th><th>Header 2<\/th><\/tr><tr><td>Data 1<\/td><td>Data 2<\/td><\/tr><\/table>');\n    } else if (action === 'insertQuote') {\n      document.execCommand('formatBlock', false, '<blockquote>');\n    } else if (action === 'insertCodeBlock') {\n      document.execCommand('insertHTML', false, '<pre><code>\/\/ Code here<\/code><\/pre>');\n    } else if (action === 'insertHR') {\n      document.execCommand('insertHorizontalRule', false, null);\n    } else if (action === 'checklist') {\n      document.execCommand('insertHTML', false, '<input type=\"checkbox\"> Task item<br>');\n    } else if (action === 'undo') {\n      document.execCommand('undo', false, null);\n    } else if (action === 'redo') {\n      document.execCommand('redo', false, null);\n    }\n    editor.focus();\n    updateStats();\n  }\n\n  function smartAutoFormat() {\n    let text = editor.innerText;\n    if (!text.trim()) {\n      notify('No text to format');\n      return;\n    }\n    let lines = text.split(\/\\r?\\n\/);\n    let html = lines.map(line => {\n      line = line.trim();\n      if (!line) return '<br>';\n      if (line === line.toUpperCase() && line.length < 50) return `<h2>${line}<\/h2>`;\n      if (\/^[-*\u2022]\\s+\/.test(line)) return `<li>${line.replace(\/^[-*\u2022]\\s+\/, '')}<\/li>`;\n      return `<p>${line}<\/p>`;\n    }).join('');\n    editor.innerHTML = html;\n    saveCurrentDoc();\n    updateStats();\n    updateOutline();\n    notify('Auto-formatted successfully');\n  }\n\n  function cleanSpaces() {\n    let html = editor.innerHTML;\n    html = html.replace(\/[ \\t]+\/g, ' ').replace(\/(<br\\s*\\\/?>\\s*){3,}\/gi, '<br><br>');\n    editor.innerHTML = html;\n    saveCurrentDoc();\n    updateStats();\n    notify('Spaces cleaned');\n  }\n\n  function detectTables() {\n    let text = editor.innerText;\n    let rows = text.split(\/\\r?\\n\/).filter(r => r.trim());\n    if (rows.length < 2) return notify('Not enough data');\n    let t = '<table>';\n    rows.forEach((r, i) => {\n      t += '<tr>';\n      r.split(\/[\\t,|]+\/).forEach(c => {\n        t += i === 0 ? `<th>${c.trim()}<\/th>` : `<td>${c.trim()}<\/td>`;\n      });\n      t += '<\/tr>';\n    });\n    t += '<\/table>';\n    editor.innerHTML += t;\n    saveCurrentDoc();\n    notify('Table built');\n  }\n\n  function extractEntities() {\n    let text = editor.innerText;\n    let emails = text.match(\/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\/g) || [];\n    let phones = text.match(\/(\\+\\d{1,3}[- ]?)?\\d{10}\/g) || [];\n    editor.innerHTML += `<p><strong>Extracted:<\/strong> Emails: ${emails.join(', ') || 'None'} | Phones: ${phones.join(', ') || 'None'}<\/p>`;\n    saveCurrentDoc();\n    notify('Entities extracted');\n  }\n\n  function generateSummary() {\n    let sentences = editor.innerText.split(\/[.?!]\/).filter(s => s.trim());\n    let summary = sentences.slice(0, 3).join('. ') + '.';\n    editor.innerHTML += `<p><strong>Summary:<\/strong> ${summary}<\/p>`;\n    saveCurrentDoc();\n    notify('Summary added');\n  }\n\n  function findText() {\n    let q = document.getElementById('stfFindInput').value;\n    if (!q) return;\n    let regex = new RegExp(`(${q})`, 'gi');\n    editor.innerHTML = editor.innerHTML.replace(regex, '<mark>$1<\/mark>');\n    notify('Found matches');\n  }\n\n  function replaceText() {\n    let q = document.getElementById('stfFindInput').value;\n    let r = document.getElementById('stfReplaceInput').value;\n    if (!q) return;\n    editor.innerHTML = editor.innerHTML.replace(new RegExp(q, 'gi'), r);\n    saveCurrentDoc();\n    updateStats();\n    notify('Replaced');\n  }\n\n  function updateStats() {\n    let text = editor.innerText || '';\n    let words = text.trim() ? text.trim().split(\/\\s+\/).length : 0;\n    let chars = text.length;\n    document.getElementById('stfStatWords').textContent = words;\n    document.getElementById('stfStatChars').textContent = chars;\n    document.getElementById('stfStatTime').textContent = Math.ceil(words \/ 200) + ' min';\n    document.getElementById('stfStatusBarWords').textContent = words + ' words';\n    document.getElementById('stfStatusBarChars').textContent = chars + ' chars';\n  }\n\n  function updateOutline() {\n    let hs = editor.querySelectorAll('h1, h2, h3, h4, h5, h6');\n    let list = document.getElementById('stfOutlineList');\n    if (!hs.length) {\n      list.innerHTML = 'No headings detected.';\n      return;\n    }\n    list.innerHTML = '';\n    hs.forEach((h, i) => {\n      let d = document.createElement('div');\n      d.style.padding = '4px 0';\n      d.style.cursor = 'pointer';\n      d.textContent = `${i + 1}. ${h.textContent}`;\n      d.addEventListener('click', () => h.scrollIntoView({ behavior: 'smooth' }));\n      list.appendChild(d);\n    });\n  }\n\n  function updatePreview() {\n    preview.innerHTML = editor.innerHTML;\n  }\n\n  function exportFile(type) {\n    let content = '', filename = 'document.', mime = 'text\/plain';\n    if (type === 'html') {\n      content = `<!DOCTYPE html><html><body>${editor.innerHTML}<\/body><\/html>`;\n      filename += 'html'; mime = 'text\/html';\n    } else if (type === 'md') {\n      content = editor.innerText;\n      filename += 'md'; mime = 'text\/markdown';\n    } else if (type === 'json') {\n      content = JSON.stringify({ content: editor.innerHTML }, null, 2);\n      filename += 'json'; mime = 'application\/json';\n    } else {\n      content = editor.innerText;\n      filename += 'txt'; mime = 'text\/plain';\n    }\n    let blob = new Blob([content], { type: mime });\n    let url = URL.createObjectURL(blob);\n    let a = document.createElement('a');\n    a.href = url;\n    a.download = filename;\n    a.click();\n    URL.revokeObjectURL(url);\n    notify('Exported successfully');\n  }\n\n  function populateCommandPalette() {\n    let list = document.getElementById('stfCommandList');\n    let cmds = [\n      { name: 'Smart Format', fn: smartAutoFormat },\n      { name: 'Clean Spaces', fn: cleanSpaces },\n      { name: 'Detect Tables', fn: detectTables },\n      { name: 'Generate Summary', fn: generateSummary }\n    ];\n    list.innerHTML = '';\n    cmds.forEach(c => {\n      let div = document.createElement('div');\n      div.style.padding = '8px';\n      div.style.cursor = 'pointer';\n      div.textContent = c.name;\n      div.addEventListener('click', () => {\n        c.fn();\n        document.getElementById('stfModalPalette').classList.remove('open');\n      });\n      list.appendChild(div);\n    });\n  }\n\n  init();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Smart Text Formatter &#038; Data Organizer Pro Smart Formatter Pro New Sidebar Undo Redo ParagraphHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6 System SansSystem SerifMonospace 12px15px18px22px B I U S X\u00b2 X\u2082 Left Center Right \u2022 List 1. List \u2611 Check Table Quote &lt;\/&gt; HR \u2728 Smart Format \u2318 Command Focus Workspace Tools \u2715 Smart Outline [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-903","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":4,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/903\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/903\/revisions\/907"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}